1. Vue项目部署的实现(阿里云+Nginx代理+PM2)

     更新时间:2019年03月26日 14:51:40   作者:Clearlove   我要评论

    这篇文章主要介绍了Vue项目部署的实现(阿里云+Nginx代理+PM2),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    最近部署一个Vue项目到阿里云ECS上,因为项目涉及一些跨域请求,所以采用了Nginx代理请求本地的node服务(利用pm2做进程管理)。node服务借助axios设置headersrefererhost转发请求,解决跨域请求问题。

    先交代下在阿里云ECS里安装的部署环?#24120;?code>phpstudy(php调试运行大礼包,里面包含nginx、mysql等,还能监控端口占用情况)、pm2(node服务进程管理工具)、nodegit等等。

    部署过程

    1. 拉去GitHub项目代码至root目录下(找到安装phpstudy的WWW目录),构建项目
    2. 修改nginx-conf的代理配置、root项配置(指向项目项目的dist目录下)
    3. 启动pm2(项目中,事先已写好服务端逻辑prod.server.js)
    4. 启动phpstudy
    5. 访问项目

    构建项目

    构建项目前,要修改项目confing目录下的index.js,主要是build部分的端口、目录,具体如下:

    build: {
      port: 9001, // 因为我是用PHPStudy做web服务器的,此时php.cgi会占9000端口,所以改用9001
      // Template for index.html
      index: path.resolve(__dirname, '../dist/index.html'),
    
      // Paths
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '',
      .......
    }

    主要有两部分

    修改端口,跟代理端口一致

    port: 9001

    修改assetsPublicPath

    assetsPublicPath: ''

    nginx-conf配置

    利用phpstudy,可以很方便的进行nginx相关设置、host修改、端口监控等等。先来说说nginx-conf的配置。

    ?#26085;?#21040;nginx-conf配置入口

    修改ngin-conf

    upstream my_project {
     server 127.0.0.1:9001;
     keepalive 64;
    }
    
    server {
     listen    80;
     server_name my_project;
    
     #charset koi8-r;
    
     #access_log logs/host.access.log main;
     root  "C:/phpStudy/PHPTutorial/WWW/project/dist";
    
     location / {
      index index.php index.html index.htm; 
      
      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_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_max_temp_file_size 0;
      proxy_pass http://my_project/;
      proxy_redirect off;
      proxy_read_timeout 240s; 
       
     }
    }

    注意事项

    root配置,指向构建后目录

    root "C:/phpStudy/PHPTutorial/WWW/project/dist";

    设置代理端口时,避免端口占用!!

    upstream my_project {
     server 127.0.0.1:9001;
     keepalive 64;
    }

    开始部署时,使用的是9000端口,一直运行不起来,后面发现phpstudy启动是php-cgi.exe默认就使用了9000端口。关于端口使用情况,phpstudy也提供了工具。

    启动pm2

    关于pm2的介绍、常规使用自行了解。在项目目录下事先已经写好了转发请求的逻辑。

    pro.server.js

    var axios = require('axios')
    const bodyParser = require('body-parser')
    var config = require('./config/index')
    var express = require('express')
    
    var app = express()
    var apiRoutes = express.Router()
    
    apiRoutes.get('/api/getdata', function(req, res) {
     var url = 'https://a.com'
     axios.get(url, {
      headers: {
       referer: 'https://b.com',
       host: 'b.com'
      },
      params: req.query
     }).then((response) => {
      ....
     }).catch((e) => {
      console.log(e)
     })
    })
    
    
    app.use('/', apiRoutes)
    
    app.use(express.static('./dist'))
    
    var port = process.env.PORT || config.build.port
    
    module.exports = app.listen(port, function (err) {
     if (err) {
      console.log(err)
      return
     }
     console.log('Listening at http://localhost:' + port + '\n')
    })

    这里只是简单的借助axios可以设置refererhost,实现代理转发的功能。

    运行prod.server.js

    prod.server.js是在根目录下,所以运行命令如下:

    pm2 start prod.server.js

    进程列表:

    pm2 start list

    查看进程详情

    pm2 show 0

    总结

    整个部署过程涉及比较多的知识点,nginx代理node开发部署端口管理等等。在端口占用这个点上卡了一段时间。不过目前只是实现构建部署、访问。但维护成本还是比较高,先得从GitHub拉取代码,本地构建。项目完成以后,研究下?#20013;?#24615;集成流程。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    最新评论

    山东群英会开奖查询
      1. 体育彩票在那个电视台开奖 网上购买彩票中奖怎么领取 福彩中奖方法 17175捕鱼达人官方 华东15选5彩乐乐 吉利平特肖心水论坛 四川快乐12昨天开奖结果 河南11选5中奖查询 广东好彩1玩法 兰州体育彩票销售点 彩经网双色球 乐彩网福彩开奖号 E尊国际娱乐城赌博网 江苏e球彩胜负开奖结果 一头一尾中特期期最准