文档章节

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

o
 osc_y8yehimr
发布于 2019/03/20 15:34
字数 542
阅读 92
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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 

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
一套完整的web项目框架:在使用Docker环境下,nginx+nodejs部署后端服务,mysql作数据库存储,vue处理前端展示,Jenkins构建自动化发布,git代码托管(三)

  本篇BLOG主要分为7个小节讲解,每个小节独立一篇,方便编写和阅读: 第一节 :前期准备工作 第二节 :安装docker环境 第三节 :nginx+nodejs部署后端服务 第四节 :安装并配置mysql环境 ...

osc_p7n3xg76
03/23
4
0
第一次将Vue-node.js前后端代码发布到服务器运行

b站全栈之巅有详细项目打包发布流程,针对小白新手的教程,下面放一个连接https://www.bilibili.com/video/av58969687 1. 生产环境的编译 在本地启动vue项目时,一般都是分别 npm run serve启...

osc_tehy8vur
2019/08/05
2
0
手把手教你把web应用丢到服务器上(单页应用+ 服务端渲染)

前两篇文章中,我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板,并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex。在这两篇文章的评论...

osc_e4g3mco3
06/30
4
0
部署前后端分离项目

路飞前后端项目部署 前言 使用软件 vue 部署前段 uwsgi uWSGI是一个全功能的HTTP服务器,实现了WSGI协议、uwsgi协议、http协议等。它要做的就是把HTTP协议转化成语言支持的网络协议。比如把H...

osc_m6qqd6pr
2019/01/14
2
0
Linux--前后端分离部署

项目部署 (vue + nginx + uwsgi + django + mysql + redis) 一 . 前端部署   1. 下载vue代码,解压缩 wget https://files.cnblogs.com/files/pyyu/07-luffyproject01.zip zip格式的用unzip......

osc_ycepdqlf
2019/04/08
3
0

没有更多内容

加载失败,请刷新页面

加载更多

聚焦餐饮行业,研究院昨发布数据显示

谈话,聚焦餐饮行业,研究院昨发布数据显示,今年上半年,全国餐饮行业招聘需求增长46.18%,平均月薪6387元.随着餐饮行业的快速发展,"如何留人"也成为餐饮企业的思考题. 记者了解到,中国饭店协会...

点击fojewio
今天
20
0
3·15晚会曝光上海氪信、招财旺旺SDK包泄露隐私 后台上传交易验证码敏感信息

来源 | 央视 7月16日,央视3·15晚会曝光国美易卡、美的空调遥控器、姨妈日历、银码头等50多款软件中内嵌的SDK包读取、上传用户隐私问题。上海氪信信息技术有限公司、北京招财旺旺信息技术有...

镭射财经
今天
17
0
名称=''的无效表单控件不可聚焦 - An invalid form control with name='' is not focusable

问题: I have an acute problem on my website. 我的网站上有一个严重的问题。 In Google Chrome some customers are not able to proceed to my payment page. 在Google Chrome浏览器中,某......

技术盛宴
今天
14
0
Hacker News 简讯 2020-07-17

更新时间: 2020-07-17 01:01 Let’s avoid talk of ‘chemical imbalance’: it’s people in distress - (psyche.co) 让我们避免谈论“化学失衡”:这是处于困境中的人们 得分:260 | 评论:...

FalconChen
今天
92
0
【LeetCode】 59 在排序数组中查找元素的第一个和最后一个位置

题目: 解题思路: 二分法 https://leetcode-cn.com/problems/find-first-and-last-position-of-element-in-sorted-array/solution/zai-pai-xu-shu-zu-zhong-cha-zhao-yuan-su-de-di-yi-/ 代......

JaneRoad
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部