Nuxt项目宝塔上线部署pm2

bnnnnnnnn
1,659 阅读3分钟

项目部署

在nuxt.js的官网介绍了3种部署方式，分别是服务端渲染应用部署（SSR），静态应用部署和单页面应用程序部署 (SPA),我的需求是ssr部署

  1. 服务端渲染应用部署（Server-Side Rendering, SSR） :

    • 在这种模式下，每个请求都会在服务器上动态生成 HTML。这有助于提高首次加载的速度和搜索引擎优化（SEO），因为搜索引擎爬虫可以直接读取预渲染的 HTML 内容。
    • 部署时，你需要确保服务器环境支持 Node.js，并且可以运行 Nuxt.js 应用。通常情况下，你会使用 npm run build 命令来构建应用，然后使用 npm start 或者 pm2 等工具来启动应用。

  2. 静态应用部署（Static Site Generation, SSG） :

    • 这种模式适合不需要实时数据更新的应用场景。Nuxt.js 可以预先生成所有页面的静态文件，这些文件可以被托管在任何静态文件服务器或 CDN 上。
    • 使用 nuxt generate 命令可以生成静态站点，之后你可以将生成的 dist 目录中的文件上传到你的服务器或者静态站点托管服务（如 Netlify、Vercel 等）。

  3. 单页面应用程序部署（Single Page Application, SPA） :

    • 单页面应用模式下，初始加载时会下载整个应用，后续的页面切换通过客户端 JavaScript 实现，无需重新加载页面。
    • 这种模式适用于那些对SEO要求不高，或者可以通过其他方式（如预加载、懒加载等）处理 SEO 的应用。
    • 构建和部署 SPA 模式的 Nuxt.js 应用，通常也是通过 npm run build 来构建，然后使用 npm start 启动应用。但是，在配置文件 nuxt.config.js 中，需要设置 target: 'static' 来指定构建目标为静态文件，即使实际上是以 SPA 方式运行。

部署流程

原理： 只要在本地跑npm run build后,把.nuxt, static, package.json,nuxt.config.js这个4个文件打包放入服务器就行，在服务器上进入项目的根目录运行 npm install安装依赖包。nuxt项目也可以使用pm2启动，安装pm2： 宝塔具体操作：

image.png image.png

使用 PM2 启动项目

  1. 在宝塔面板首页，点击左侧菜单栏的“软件商店”。

  2. 搜索并安装 PM2 管理器。

  3. 安装完成后，点击 PM2 管理器图标进入管理页面。

  4. 点击“添加任务”，填写以下信息：

    • 路径：/www/wwwroot/your-domain.com
    • 启动命令：npm run start
    • 任务名称：my-nuxt-app

  5. 点击“提交”以添加任务。

  6. 在 PM2 管理页面中，找到你刚刚添加的任务，点击“启动”按钮。

注意事项

  • Node.js 版本：确保服务器上的 Node.js 版本与本地一致。
  • 环境变量：确保服务器上的环境变量与本地一致。
  • 文件权限：确保文件和目录具有正确的权限。

使用Nginx实现反向代理

image.png

server { 
  listen 80;
  server_name your-domain.com;
  
  location / { proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host; proxy_cache_bypass $http_upgrade;
   } 
}

这样代理原来nginx的静态资源访问不了了，原来还要把静态资源的文件夹加上

server {
    listen 80;
    server_name your-domain.com;

    # 静态资源位置
    location /static/ {
        alias /www/wwwroot/your-domain.com/static/;
        expires 30d;  # 可选：设置缓存时间
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

测试

打开浏览器，访问你的域名或公网 IP 地址，确保 Nuxt.js 应用程序能够正常加载：

总结

遇到的问题都是通过谷歌和ai找到解决方法的，在这只是做个简单总结，也方便以后忘记了回来查看一下

avatar
文章
阅读
粉丝