【前端开发】前端项目部署到Linux系统教程

1.1 前端部署（pmnova是我起的项目名称）

1) 将发布文件打包成zip或tar格式，上传至服务器

2) 创建文件目录  ★目录路径、名称一定要保持一致，方便后续维护

mkdir -p /opt/pmnova/frontend

3) 将zip格式文件解压缩至/opt/pmnova/frontend目录

 unzip pmnova_backEnd.zip  -d /opt/pmnova/frontend/

4) 到目录查看解压文件

cd /opt/pmnova/frontend/

5) 安装nginx

yum install nginx     #在线安装nginx

6) 启动nginx服务

systemctl enable --now nginx

7) 查看nginx版本

nginx -version

8) 在服务器浏览器输入http://127.0.0.1 可以看到以下界面证明可以正常访问

9) 修改nginx配置文件

cd  /etc/nginx

vim nginx.conf

将80站点这部分注释掉，如下图

10) 在 /etc/nginx/conf.d/目录下创建fmcs.conf文件

cd  /etc/nginx/conf.d

touch  pmnova.conf

 vim pmnova.conf

11) 输入以下配置内容

server {

  listen 6601;

  root /opt/pmnova/frontend;

  index index.html;

 

  location / {

try_files $uri $uri/ /index.html;

  }

 

location ^~/prod-api/File/DownloadTemplate/ {

    alias /opt/pmnova/backend/wwwroot/File/DownloadTemplate/;

    add_header Content-Disposition "attachment";

    add_header Content-Type application/octet-stream;

    autoindex off;

}

 

  # prod-api routes rewrite

  location ~* ^/(.*?)/?prod-api/(.*)$ {

proxy_pass http://127.0.0.1:6608/$2?$query_string;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  }

  # open-api routes rewrite

  location ~* ^/(.*?)/?open-api/(.*)$ {

proxy_pass http://127.0.0.1:6606/$2?$query_string;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  }

  # msghub routes rewrite

 

  # handle Vue Router History mode and 404/500 pages

  error_page 404 /index.html;

}

 

12) 测试配置文件是否正确

nginx -t

13) 重启nginx服务

nginx -s reload    或    systemctl restart nginx

14) 服务器防火墙设置

firewall-cmd --add-port=6601/tcp --permanent   #永久开放后台端口，这样其他电脑也可以访问

firewall-cmd --add-service=http --permanent   #开放服务（如http）

systemctl restart firewalld     #重启防火墙

15) 默认站点端口是80，如果需要修改成其他端口，请修改pmnova.conf文件，浏览器访问ip出现以下界面则部署成功

 

 建议本地直接上传nginx.conf、fmcs.conf文件到指定目录，然后操作12-14步骤，更加快速，避免错误