01.09 商城 PC 端生产环境部署

### 说明

• 商城用户PC端（joolun-plus-uniapp-pc）和商城用户移动端（joolun-plus-uniapp）一样用uniapp开发，支持编译成PC端H5，PC端即在移动端的基础上演变而来，所以在技术开发上和移动端基本一样

注意事项

• 以下文档截图为joolun-plus-uniapp项目，joolun-plus-uniapp-pc项目同理

项目导入HBuilder并安装依赖

• HBuilder X打开（文件-导入-从本地目录导入）商城端代码（joolun-plus-uniapp-pc）
• 在joolun-plus-uniapp-pc目录下运用如下命令

npm install --registry=https://registry.npmmirror.com

PC端H5（joolun-plus-uniapp-pc）部署

• 

• 填好标题和域名，直接点发行

• 观察下面控制台，编辑成功后会生成一个h5的包（joolun-plus-uniapp-pc/unpackage/dist/build/h5）

• 为防止和移动端冲突，将joolun-plus-uniapp-pc/unpackage/dist/build/h5改名成joolun-plus-uniapp-pc/unpackage/dist/build/h5-pc

• 上传打包改名后的h5-pc文件夹到/mnt/install/joolun-plus/目录下

  

• 到你的域名服务商平台将h5端需要使用的域名（对应下面nginx中要配置的server_name）解析指向到你服务器的公网IP，不同服务商平台操作不同这里不做详细说明，不懂的可以联系自己的服务商或百度

• 修改nginx配置

  #vi /etc/nginx/conf.d/default.conf

  不同版本的nginx配置文件有所不同根据自己实际版本操作

  在http {}标签中增加一个80的server，代码如下

  server {
      listen       80;
      server_name  pro-pc.joolun.com www.pro-pc.joolun.com;
  
      root /mnt/install/joolun-plus/h5-pc/;
  
      location / {
        try_files $uri $uri/ /index.html;
      }
  
        location ~* ^/(mall|mallapi|upms|code|live) {
         proxy_pass http://127.0.0.1:9999;
         #proxy_set_header Host $http_host;
         proxy_connect_timeout 15s;
         proxy_send_timeout 15s;
         proxy_read_timeout 15s;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         # For WebSocket upgrade header
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
      }
      # 避免端点安全问题
      if ($request_uri ~ "/actuator"){
          return 403;
      }
  }
  

• 重启nginx

  # systemctl restart nginx.service

• 发布成功后可以直接在外部浏览器访问http://域名/?tenant_id=1， （地址后面要加上tenant_id租户ID，否则后报错），如果能加载出数据就说明项目已经跑起来了