nuxtjs项目部署Ubuntu服务器

最新推荐文章于 2024-11-20 15:42:38 发布

原创最新推荐文章于 2024-11-20 15:42:38 发布 · 931 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt #ssr #vue #前端 #部署

nuxt.js 专栏收录该内容

15 篇文章

订阅专栏

本文详述了如何使用Nuxt.js进行服务端渲染(SSR)，并配合nginx在Ubuntu服务器上部署Node项目。涵盖了技术栈介绍、本地打包、服务器环境搭建、依赖安装、PM2守护进程启动及nginx配置等关键步骤。

由于为了达到更好的SEO效果，最近研究了下nuxt.js 来做服务端渲染（SSR）。

本文来讲讲，在本地开发完成后怎么在服务器上配合nginx部署node项目。

技术栈：

nuxt.js -- 2.9.2
nginx -- 1.10.3
pm2 -- 3.5.1
node -- v10.16.3
npm -- 6.9.0

步骤：

本地打包、上传到服务器
安装服务器环境
安装项目依赖和测试启动
PM2 守护启动
nginx配置

正文：

本地打包

打包前，先设置好在服务器中要打开的端口

设置在 package.json中:(我设置的8004端口)

[外链图片转存失败(img-GrI7KyQh-1569229030947)(nuxtjs项目部署Ubuntu服务器\Image.png)]
在项目终端执行：

npm run build

上传服务器

本地打包完成后，上传文件到服务器。

只需要把下图中所示的四个文件(夹) 上传到服务器即可。

[外链图片转存失败(img-YV2IyULH-1569229030948)(nuxtjs项目部署Ubuntu服务器\Image1.png)]

怎么上传文件到服务器本文不再做说明。

安装服务器环境

安装node
安装npm
安装 PM2
安装 nginx

这些安装网上一搜一堆，本文不再做说明。

安装项目依赖

cd 切换到项目文件夹内，执行npm install 安装项目依赖环境

npm install

测试启动

当安装完依赖后，npm start 就可以看到 nuxt 运行起来了。

npm start

这时就已内网 IP+设置的端口（8004）启动了

pm2 守护开启进程

在项目的根目录下，执行一下命令。启动nuxt项目

pm2 start npm --name "my-nuxt" -- run start

可以用 pm2 list 看到当前所有node进程列表。

关于pm2的使用，请访问：https://juejin.im/post/5be406705188256dbb5176f9

顺利的话，nuxt项目已经启动起来了，但是只能内网IP进行访问。

此时，可以使用nginx做反向代理通过外网来访问nuxt项目

nginx配置

切换到nginx目录，并打开nginx配置项。

cd /etc/nginx
vim nginx.conf

配置nginx:

server{
         listen 80/port;
         server_name your_domain;

         gzip on;
         gzip_types      text/plain application/xml text/css application/javascript;
         gzip_min_length 1000;

         location / {
             expires $expires;
             proxy_redirect                      off;
             proxy_set_header Host               $host;
             proxy_set_header X-Real-IP          $remote_addr;
             proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto  $scheme;
             proxy_read_timeout          1m;
             proxy_connect_timeout       1m;
             proxy_pass  http://127.0.0.1:8004;
  # http://127.0.0.1 + nuxt启动端口
          }
      }

重启nginx