1.在webstorm中打開npm窗口，選擇build:prod，右鍵Run 'build:prod'，如下圖所示
image.png
2.運行完了會在項目根目錄下生成dist，如下圖所示
image.png
3.將dist文件里面的東西放到linux服務(wù)器上，可以自己指定文件存放位置
image.png
4.接下來是重點，Nginx的配置，文件位置
/usr/local/nginx/conf/：如下圖
image.png
image.png
server {
listen 20001; # 監(jiān)聽的端口，默認是80
server_name localhost; # 域名或ip
#charset koi8-r;
#access_log logs/host.access.log main;
#location / {
# root html;
# index index.html index.htm;
#}
location / { # 訪問路徑配置
root /home/cbi-linux/webserv/cbi-data-front; # 根目錄
try_files $uri $uri/ /index.html; # 防止刷新404
index index.html; # 默認首頁
}
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://117.34.72.199:30093/; # 后端服務(wù)器地址，很重要，nginx會將前端的請求通過該地址發(fā)送給后端，獲取數(shù)據(jù)
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
5.重新加載nginx配置文件，重啟nginx
/usr/local/nginx/sbin/nginx -s reload # 重新載入配置文件
/usr/local/nginx/sbin/nginx -s reopen # 重啟 Nginx
/usr/local/nginx/sbin/nginx -s stop # 停止 Nginx
通過前端端口做的映射117.34.72.199:40093 訪問，172.16.254.93:20001真實服務(wù)ip地址
image.png
6.成功訪問如下圖
image.png
