前言
记录nuxt构建项目,打包并部署至服务器的流程步骤
服务器连接准备请看第一篇文章
一、Nuxt.js服务端渲染应用部署
Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,官方通过以下两个命令来完成:
nuxt build
nuxt start
复制代码
官方推荐的 package.json 配置如下
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
复制代码
接下来简单的说一下nuxt这几个命令:
nuxt: 启动一个热加载的Web服务器(开发模式)
nuxt build: 利用webpack编译应用,压缩JS和CSS资源(发布用)。
nuxt start: 以生成模式启动一个Web服务器 (nuxt build 会先被执行)。
二、Nuxt.js打包部署
第一步,打包
在执行 npm run build 的时候, nuxt 会自动打包。
第二步,选择要部署的文件:
需要将几个必须的文件及文件夹上传至服务器端
.nuxt / 文件夹 (build之后,内部会有个dist目录)
static /静态不编译的文件夹
package.json 文件 配置文件
nuxt.config.js 文件 (如果你配置proxy,端口号等)
复制代码
第三步,安装依赖
进入你上传必备目录至服务器 /root/my-nuxt (my-nuxt) 是你定义的目录名称,安装依赖npm install
第四步,修改配置文件
如需要修改服务端特殊配置,则直接命令行打开nuxt.config.js
打开控制台,输入
vim nuxt.config.js
复制代码
输入a或i进入编辑模式,修改对应的ip或端口之后按下Esc并输入:wq保存并退出:q直接退出
第五步,启动你的nuxt:
使用pm2启动你的nuxt.js
$ npm install // or yarn install 如果未安装依赖或依赖有更改
$ pm2 start npm --name "my-nuxt" -- run start
复制代码
启动完毕后即可用pm2命令pm2 list查看已启动的node服务了
如果需要停止服务则使用pm2 stop my-nuxt ,重启使用pm2 restart my-nuxt ,删除使用pm2 delete my-nuxt
....
到此处启动完成后,即部署成功了,如线上环境需要 使用Nginx服务来配置负载均衡或映射80端口至nuxt服务的3000端口,则需要另外配置服务器Nginx来实现