首页 > 其他 > 详细

nginx 部署前端项目

时间:2021-06-13 19:00:48      阅读:18      评论:0      收藏:0      [点我收藏+]

(1)  先上传项目到 git  记得不要把node_module  上传了 

(2)登录服务器, 创建一个空文件夹 命名 例如 music_vue

  (3)  从远程克隆项目  先 npm  install    再npm  run  build  

  (4)  前端项目 注意不要用 history  路由

(5)如果在服务器创建了文件夹  我们要设置   publicPath

  比如:设置上级目录下的 ./  这里可以不做判断

publicPath: process.env.NODE_ENV === production ? ./ : ./

  (6) 接口判断:axios

const baseURL = process.env.NODE_ENV === production ? http://xxxxxxxxx/ : /

(7) 可以先测试 

 测试项目的静态文件 ,  npm  run  build  看看可以在本地访问到不

 测试接口  访问接口路径  看看可以请求到接口不 

(8) 开放端口  这里设置安全组开放前端 后端端口

 (9) 设置nginx  代理 

技术分享图片

 

 

music.conf 的内容:

server_name music.xxx.xxxxx; 是网站路径
proxy_pass  http:/xxxxx:9003; # 代码接口的url;
 
server {
        listen 80;
        server_name music.xxxx.xxxx;
        location / {
           root /root/music-vue/dist;
           index index.php index.html index.htm; 
        }
        location /api { 
           proxy_pass  http://xxxxx:9003; # 接口的url;
           proxy_buffer_size 64k;
           proxy_buffers   32 32k;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Host $http_host;
           proxy_set_header X-NginX-Proxy true;
       }
 }

 (10)  啊里云 域名解析

 

 

 技术分享图片

 

nginx 部署前端项目

原文:https://www.cnblogs.com/guangzhou11/p/14880638.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!