nuxtjs项目部署Ubuntu服务器

2019-11-22T15:07:54.890 | 浏览:33 | 文章类别: 前端

由于为了达到更好的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

步骤:

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

正文:

本地打包

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

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

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

npm run build

上传服务器

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

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

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

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

安装服务器环境

  1. 安装node
  2. 安装npm
  3. 安装 PM2
  4. 安装 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

nginx -s reload