14-jetlinks平台进行前端服务打包部署(基于Windows系统)

（1）下载Nginx

官网下载Nginx，这里是使用windows的稳定版本进行测试。下载地址：http://nginx.org/en/download.html
下载完成后，直接解压到指定文件目录即可使用。

进入到Nginx文件目录中执行如下命令启动Nginx服务

start nginx

命令执行完成后，浏览器打开：127.0.0.1:80，若出现如下页面则Nginx安装并运行成功

（2）打包前端项目

输入如下命令进行打包

yarn build

命令执行完成会在工程根目录下生成dist文件

（3）配置Nginx

将生成的dist文件夹复制粘贴到Nginx文件夹中的html文件夹中。

修改Nginx文件目录下的/conf/nginx.conf中的内容，只需要调整如下的代码块即可。

server {
  listen 9000; #访问的端口（默认9000，根据需求自定义）
  listen [::]:9000;
  # gzip config
  gzip on;
  gzip_min_length 1k;
  gzip_comp_level 9;
  gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
  gzip_vary on;
  gzip_disable "MSIE [1-6]\.";
  location / {
    root   html/dist; #项目资源文件加载目录
    index  index.html; #项目首页文件
  }

  # nginx反向代理，自动匹配路径中带有"/api/"部分并转发至proxy_pass代理的后端地址
  location ^~/api/ {
      proxy_pass http://127.0.0.1:8848/; #代理地址，修改为后端地址
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP  $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_connect_timeout   1;
      proxy_buffering off;
      chunked_transfer_encoding off;
      proxy_cache off;
      proxy_send_timeout      30m;
      proxy_read_timeout      30m;
      client_max_body_size    500m;
  }
}

保存配置文件，需要重新启动Nginx，执行如下命令重启。

//重启nginx

nginx -s reload

windows下使用Nginx命令

命令	说明
start nginx	开启Nginx服务
nginx -s stop	快速停止Nginx，可能并不保存相关信息
nginx -s quit	完整有序地停止Nginx，并保存相关信息
nginx -s reload	重启Nginx服务
nginx -v	查看Nginx版本号

Linux下使用Nginx命令

命令	说明
./nginx	开启Nginx服务
./nginx -s stop	快速停止Nginx，可能并不保存相关信息
./nginx -s quit	完整有序地停止Nginx，并保存相关信息
./nginx -s reload	重启Nginx服务
./nginx -v	查看Nginx版本号

（4）访问服务前端

打开浏览器，访问http://localhost:9000，账号/密码：admin/admin。若能正常访问服务则打包部署成功。
前提：成功启动了后端服务。