1.部署nuxt项目到服务器;
由于vue做出来的项目不利于SEO,所以采用服务端渲染 Nuxt 进行项目改造
1.1 打包nuxt项目
npm run build
后会在 .nuxt 文件中生成一个 dist 文件夹;
1.2 将以下5个文件放入服务器;
1.2.1 新建pc_nuxt
文件夹 mkdir pc_nuxt
,将下面的文件放入;
.nuxt
放置一些配置规则的文件;
static
静态资源;
app.html
项目目录默认没有默认模板,可选;
nuxt.config.js
nuxt的配置文件;
package.json
所有需要用到的包;
1.2.2 安装项目所需要的包文件
npm install
到这里项目已经上传到服务器,就可以运行了。
1.2.3 启动nuxt项目
npm run start
看到下面的提示,说明已经成功
当在浏览器输入 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
;
浏览器输入域名地址 ojbk;成功访问,问题解决。
3. pm2部署nuxt项目
全局安装:
npm i -g pm2
在项目目录下:
pm2 start npm --name 'pc-nuxt' -- run start
将nuxt项目跑在了pm2上,并且命名为 pc-nuxt
;
4. 撸一个免费的ssl证书
免费的ssl证书有很多,大家可百度,我推荐使用腾讯云,下面是具体流程
进入腾讯云
-
打开控制台
2.点击云产品 选择ssl证书
-
选择 申请免费证书
-
填写个人信息
等待申请通过并通过审核 约10几分钟;
成功后将证书下载
下载成功后将nginx的文件夹放入服务器目录 /ssl
配置nginx下图所示:
到这里就全部done了。