前端小白一枚,开始学习nuxt.js,最近学会了简单的部署,写篇文章记录下
经过学习,目前学会了nuxt的两种部署
- 部署到服务器(使用pm2)——npm run build
1.先对项目进行打包,npm run build,打包完成后进行npm run start 验证打包之后是否没问题。
打包成功:
npm run start成功
2.需要几个文件,.nuxt文件夹,static文件夹,nuxt.config.js文件,packpage.json文件,ecosystem.config.js(这个为pm2的配置文件)文件压缩并解压上传到服务器目录下。
//ecosystem.config.js
module.exports = {
apps: [
{
name: 'nuxt-test', //名字要与pagepack.json里面对应到
exec_mode: 'cluster',//cluster模式,多实例多进程,但是只支持node,端口可以复用,不需要额外的端口配置,0代码实现负载均衡。
//单实例多进程,常用于多语言混编,比如php、python等,不支持端口复用,需要自己做应用的端口分配和负载均衡的子进程业务代码。
instances: '1', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
3.在服务器那里运行终端,npm i下载依赖,然后运行pm2 start 使用PM2进行进程守护(这里我使用的是宝塔面板)
4.在nginx配置文件选项那里配置反向代理
location / {
#include uwsgi_params;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_pass http://localhost:3000/; //这个在服务器终端里面运行查看的端口
}
- 部署到服务器__简便方法( npm run generate)
- 生成一个dist文件夹(等同于vue打包)
- 将打包好后的文件都上传到服务器目录下
- 配置nginx的反向代理
//nginx反向代理
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://110.40.198.146:3001/; //api接口的代理地址
}
最后
小白一枚,希望各路大神多给点意见或者学习建议。