前端部署

前端打包

前端项目中下面几个是主要的配置文件

.env                ==> 所有环境共用
.env.demo           ==> 演示环境，打包`yarn build:demo`
.env.development    ==> 开发环境，对应`yarn dev`命令启动
.env.devlocal       ==> 本地开发环境，对应`yarn dev:local`命令启动
.env.production     ==> 生产环境，打包`yarn build`
.env.test           ==> 测试环境，打包`yarn build:test`

其中.env.production对应的是生产环境的配置

一般情况下我们开发是在windows电脑下，当然mac电脑打包方式都类似

打开项目下mldong-vue文件夹，按住Shift+鼠标右键，选择在此处打开 Powershell或Git bash窗口，之后运行下面的打包命令：

yarn build 或者 npm run build

最后生成的dist文件夹

Nginx配置

将打包好的dist文件上传到服务器上，假设服务器已经安装有nginx,下面提供nginx的配置样例：

upstream mldong-api {
   server 127.0.0.1:18080 max_fails=3 weight=1 fail_timeout=60s;
}

server {
    listen       80;
    server_name  localhost;
    root /java_projects/mldong/dist;
    location / {
      add_header Cache-Control 'no-store';
      try_files $uri $uri/ @router;
      index index.html;
    }
    location @router {
      rewrite ^.*$ /index.html last;
    }
    location /api/ {
      proxy_read_timeout      300;
      proxy_connect_timeout   300;
      proxy_redirect          off;
      proxy_set_header    Host                $http_host;
      proxy_set_header    X-Real-IP           $remote_addr;
      proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
      proxy_set_header    X-Forwarded-Proto   $scheme;
      proxy_set_header    X-Frame-Options     SAMEORIGIN;
      proxy_pass http://mldong-api/;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   html;
    }
}

上述的逻辑是:

• 如果访问的静态文件存在，则直接返回文件
• 如果访问的静态文件不存在，则返回index.html文件。
• 如果是以/api开头的请求，则转发到后端的api服务。

其中，upstream mldong-api配置的server 127.0.0.1:18080为后端接口地址；/java_projects/mldong/dist为刚打包的dist文件的路径。

运行访问

部署成功后，即可在浏览器访问部署前端服务的IP地址+端口即可