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

2020-06-13 10:36:12易采站长站整理

}

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
可以设置
referer
host
,实现代理转发的功能。

运行prod.server.js

prod.server.js