码迷,mamicode.com
首页 > 其他好文 > 详细

Vue Nginx Node PM2 反向代理 项目部署

时间:2019-03-20 15:57:36      阅读:41      评论:0      收藏:0      [点我收藏+]

标签:detail   class   com   ade   ecs   tps   syntax   rem   bpa   

Vue Nginx Node PM2 项目部署

个人回忆使用,不是太详细,会的人应该能懂.

服务器

  1. 阿里云购买的 ECS

  2. 有个服务器,建议买个域名,但是没有域名需要备案,比较麻烦,我的还在备案中,所以就用ip来做测试

  3. ECS => 实例 => 安全组配置 => 配置规则 => 快速配置 打开80端口

    不会的百度,一大堆

    1. 解析域名什么的,添加到解析列表里面,就好了

Node

测试项目是一个教程,前后端分离,便于测试 client node-app 两个部分

  1. node 项目里面没啥说的,只是写法不一样.

  2. 关于IP有大佬详解

    0.0.0.0什么鬼

// 第一种
 // 这一种很简单,
const app = express();
...
const port = 5001;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// 第二种

...
var http = require('http');
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('hello node js');
    
}).listen(5001,"0.0.0.0");

// 这种类型 0.0.0.0 任意IP可以访问
  1. node 项目package.json文件

    1. 安装pm2

      npm install -g pm2
          2. 可能会出现安装失败的问题,建议在管理员命令窗口执行

Vue

  1. 在Vue中需要更改配置文件,设置代理

  2. 根据Vue cli版本不同 webpack的配置文件也不一样,我用的是3.0 ,文件名vue.config.js,其他版本自行百度,都一样

        devServer: {
            open: true,
            host: 'localhost',
            port: 8081,
            https: false,
            hotOnly: false,
    
            proxy: { // 配置跨域
                '/api': {
                    target: 'http://4x.xxx.128.95/api/', //服务器ip
                    ws: true,
                    changOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            },
    
            before: app => { }
        }

    这部分就是我node上的接口地址

    app.use('/api/users', users);
    app.use('/api/profile', profiles);

Nginx

  1. 百度吧太复杂,推荐技术胖

    技术胖

  2. 配置 文件

    
       cd ~
       cd /etc/nginx/conf.d
  3. 新建一个配置文件

    vim web-test.conf
    
    upstream zijinguanli {
     server 127.0.0.1:5001;
     keepalive 64;
    }
    
    server {
     listen 80;
     server_name 4x.1xx.1xx.xx;
    
     location / {
         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;
            proxy_set_header Connection "";
            proxy_pass http://zijinguanli;  //和upstream 后面一致,反向代理
     }
    }
    suod nginx -t
    
    //出现表示成功
    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    nginx: configuration file /etc/nginx/nginx.conf test is successful
    

pm2

然后就是pm2 启动项目

可能会出现防火墙未关闭的问题

1. systemctl stop  firewalld 

这样就完事 当然有大佬详细说明大佬

Vue Nginx Node PM2 反向代理 项目部署

标签:detail   class   com   ade   ecs   tps   syntax   rem   bpa   

原文地址:https://www.cnblogs.com/lakemonster/p/10565254.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!