nuxt打包项目有两种方式:一个是npm run generate, 另一个是npm run build。两种的区别是generate是生成一系列的静态页面,该页面的内容在打包的时候就已经注定了,即使某些有请求接口的数据变了,页面也不会变,所以该种方式适合一些内容不怎么改变的页面。而目前我现在做的项目有一些资讯模块,需要随时更新,所以使用build方式进行打包部署
build:(pm2+nginx的方式)
-
在工作根目录执行npm run build
-
把.nuxt、static、nuxt.config.js、package.json文件压缩上传到服务器
-
在解压的目录下,执行npm install ,安装依赖
-
使用pm2运行项目:链接
a. 安装pm2:npm install -g pm2
b. 在目录下创建ecosystem.config.js// ecosystem.config.js module.exports = { apps: [ { name: 'NuxtAppName', //你的项目名 exec_mode: 'cluster', instances: 'max', // Or a number of instances script: './node_modules/nuxt/bin/nuxt.js', args: 'start' } ] }
c. 执行pm2 start即可运行项目
-
以上步骤完成之后,项目即使跑起来了,但是无法外部访问,需要使用nginx
a. nginx配置如下
upstream blognuxt {
server 127.0.0.1:3000; # 此处填写启动nuxt服务时的端口
keepalive 64;
}
server
{
listen 80;
server_name yystudy.top;
index index.html index.php index.htm default.php default.htm default.html;
root /www/wwwroot/yystudy.top;
location / {
proxy_http_version 1.1;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://blognuxt/; # 此处为upstream的名称,文件第一行定义的
proxy_redirect off;
}
#SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END
#ERROR-PAGE-START 错误页配置,可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END
access_log /www/wwwlogs/yystudy.top.log;
error_log /www/wwwlogs/yystudy.top.error.log;
}
window实现pm2自启
官网下有两种解决方案:pm2-windows-service or pm2-windows-startup,下面的教程使用pm2-windows-service这个包
- 全局安装并配置 pm2-windows-service:npm i -g pm2-windows-service
- 添加pm2环境变量:PM2_HOME=C:/Users/Administrator/.pm2
a. 右键 [我的电脑] - [属性] - [高级系统设置] - [环境变量] - 新建 [系统变量]
b. 查看pm2路径:默认安装在$HOME/.pm2,如果真找不到的话,可以执行pm2 log根据默认的日志打印位置预测pm2的路径,结果如下:
- 安装window自启服务:终端管理员权限执行pm2-service-install命令,提示Perform environment setup? 选 n就行。此时, PM2服务已安装成功并已启动, 可以通过 Win+R 来查看,输入 services.msc 即可看到服务
- 用pm2启动程序后,添加到自启列表:pm2 save
nginx配置https
5. 首先需要先买一个ssl证书,这里使用的是阿里云免费证书
6. 购买之后根据以下截图操作
选择nginx那项下载:
再点击帮助根据官方给的教程复制粘贴就行
- 配置之后的nginx配置文件示例:
upstream blognuxt {
server 127.0.0.1:3000; # 此处填写启动nuxt服务时的端口
keepalive 64;
}
server {
listen 80;
server_name yystudy.top;
# 自动跳转到https
rewrite ^ https://$http_host$request_uri? permanent;
}
server
{
listen 443 ssl;
# listen 80;
server_name yystudy.top;
index index.html index.php index.htm default.php default.htm default.html;
root /www/wwwroot/yystudy.top;
ssl_certificate /pub/4242126_www.yystudy.top.pem; #需要将cert-file-name.pem替换成已上传的证书文件的名称。
ssl_certificate_key /pub/4242126_www.yystudy.top.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#表示使用的加密套件的类型。
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
ssl_prefer_server_ciphers on;
location / {
proxy_http_version 1.1;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://blognuxt/; # 此处为upstream的名称
proxy_redirect off;
}
#SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END
#ERROR-PAGE-START 错误页配置,可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END
access_log /www/wwwlogs/yystudy.top.log;
error_log /www/wwwlogs/yystudy.top.error.log;
}