nuxt项目部署教程

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;
}

pm2常用命令

nuxt项目部署教程

Guess you like