使用 Nginx 部署 Nuxt.js 应用

Nuxt.js项目

Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架,我在这里用它是为了解决 SEO 问题。详细的介绍参见Nuxt.js官网

服务器与域名

  1. 在阿里云购买服务器与域名(服务器至少1GB,构建过程需要较大内存)
  2. 备案网站(过程较慢)
  3. 在管理控制台中云解析DNS(把网站域名或应用资源转化为数字IP地址)

Nginx

安装之前,需要 $ apt update,在所购买的服务器中安装好Nginx并完成 nginx.conf 的配置,Nginx起步参见。基础配置如下:

// server_name 域名
// proxy_pass 服务器中启动的项目访问地址
server {
  server_name zhiliaoshuiwu.com;
  listen 80;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

杂项的安装

Node.js:

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs

git:

apt-get install git

pm2:

npm install pm2 -g

强烈建议安装 screen $ apt install screen (方便打开多个命令行窗口)和 rmate(与本地建立连接,编辑各类文件)。这里有关于这两个工具的简单总结。

// rmate bash版本安装命令
curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs

启动项目

把项目从git仓库clone下来后,安装所有依赖 npm install,构建项目 npm run build,使用pm2启动项目 pm2 start pm2.json。如果需要使用https推荐使用工具certbot,跟着步骤一步一步执行命令就好。啊哈,执行完上面所有操作就可以通过域名访问你部署好的网站啦~这是我通过以上步骤部署好的税务计算工具,知了税务