Nuxt项目部署和Nginx反向代理以及配置SSL证书

1.部署nuxt项目到服务器；

由于vue做出来的项目不利于SEO，所以采用服务端渲染 Nuxt 进行项目改造

1.1 打包nuxt项目

npm run build 后会在 .nuxt 文件中生成一个 dist 文件夹；

/.nuxt/dist.png

1.2 将以下5个文件放入服务器；

1.2.1 新建pc_nuxt文件夹 mkdir pc_nuxt,将下面的文件放入；

.nuxt 放置一些配置规则的文件；
static 静态资源；
app.html 项目目录默认没有默认模板，可选；
nuxt.config.js nuxt的配置文件；
package.json 所有需要用到的包；

image.png

1.2.2 安装项目所需要的包文件

npm install
到这里项目已经上传到服务器，就可以运行了。

image.png

1.2.3 启动nuxt项目

npm run start
看到下面的提示，说明已经成功

image.png

当在浏览器输入 http://localhost:3000/ 一切却没有我们想的那么顺利，继续；

很显然，这是在服务器里开启的是一个nuxt的内置服务器，如果要访问它，
就必须要反向代理

---

2. Nginx 配置反向代理

这里就不在赘述nginx的安装等操作，不会的童靴请自行百度。

执行如下命令：
cd etc/nginx
vim nginx.conf

键入如下代码 server_name 是你的域名地址；
proxy_pass http://127.0.0.1:3000 则是上面nuxt启动的项目地址；
意思是，当访问 www.xxx.com 的时候nginx帮我们代理到 http://127.0.0.1:3000 ；

image.png

浏览器输入域名地址 ojbk；成功访问，问题解决。

---

3. pm2部署nuxt项目

全局安装：
npm i -g pm2

在项目目录下：
pm2 start npm --name 'pc-nuxt' -- run start将nuxt项目跑在了pm2上，并且命名为 pc-nuxt；

---

4. 撸一个免费的ssl证书

免费的ssl证书有很多，大家可百度，我推荐使用腾讯云，下面是具体流程

进入腾讯云

1. 打开控制台

   
   image.png

2.点击云产品 选择ssl证书

image.png

3. 选择 申请免费证书

   
   image.png

4. 填写个人信息

   
   image.png

等待申请通过并通过审核 约10几分钟；

成功后将证书下载

image.png

下载成功后将nginx的文件夹放入服务器目录 /ssl

配置nginx下图所示：

image.png

到这里就全部done了。