nuxt.js构建的项目,打包后如何部署到服务器?

longzhaobi
  • 46

文档原话:
服务端渲染应用部署

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:

nuxt build
nuxt start

打包后能运行,但dist目录下没有index.html页面,请问如何部署到ubuntu服务器上?

今天搞知道nuxt.js,觉得很神奇,有知道咋部署的吗??之前不是服务端渲染那种,直接build后丢到nginx就可以了。

评论
阅读 24.8k
8 个回答
✓ 已被采纳

文档的下面还有一个命令的

静态应用部署
Nuxt.js 可依据路由配置将应用静态化,使得我们可以将应用部署至任何一个静态站点主机服务商。

可利用下面的命令生成应用的静态目录和文件:

npm run generate
这个命令会创建一个 dist 文件夹,所有静态化后的资源文件均在其中。

使用静态应用部署应该会丢失服务器渲染的优势吧

这个问题是因为服务器端渲染是要求服务器环境在nodejs下,如果放nginx下自然会失去服务器渲染的能力。相应的如果有nodejs环境,自然支持nuxt start启动。

我是题主,看见很多人问我再回答下我现在的部署方式。

下面是docker的部署方法,

目前我公司的代码都是放到gitlab,部署到docker容器

1,在服务端安装node镜像,代码根目录有个Dockerfile文件。
Dockerfile

FROM node
RUN mkdir -p /home/blog
WORKDIR /home/blog

#移动文件
COPY . /home/blog

RUN yarn install

RUN npm run build

EXPOSE 3000

CMD ["npm", "start" ]

2,在服务器克隆代码,进入根目录运行下面脚本,loozb-blog为项目名称

echo "开始构建"

docker build -t loozb-blog .

docker run -p 82:3000 --name loozb-blog -d loozb-blog

上面就是用容器部署的方法,构建镜像的时候执行下载依赖,打包,启动。也可以提前构建个已经安装好依赖的镜像,这样不用每次启动就安装依赖了。

不用容器部署的话也很简单,服务器安装node,克隆代码,然后安装依赖,构建,启动执行就可以。

之前是把文件从本机复制到服务器运行,感觉太麻烦,现在直接克隆全部代码一样的。

1、运行程序
真正的部署是先打包npm run build,然后运行npm run start,但是我们知道nuxt是结合express框架的,使用npm run start运行,如果程序出现错误就会停止。所以为了保持程序持续运行,在linux我们要结合 nohup来运行:

nohup npm run start 1>>app.log 2>>error.log &
附上package.json的script的脚本:

"build": "cross-env NODE_ENV=production nuxt build",
"start": "cross-env NODE_ENV=production node server.js",

2、更新程序
如果程序需要更新,我们需要把已经运行的node线程给kill,然后再执行第一步的命令

重启nodes服务器

ps -ef|grep node|grep -v grep
kill -9 端口号

目前我看到了一个电子商务网站使用nuxt.js框架实现的:www.yueqizhixiang.com,大家可以去体验一下,感受一下nuxt.js的魅力和实力

Emmasuxuemin
  • 2
新手上路,请多包涵

将build之后的文件夹.nuxt丢到文件夹,安装package.json依赖,npm run start , 报错提示 No SSR build! Please start with nuxt start --spa or build usingnuxt build --universal
楼主是如何解决的。

老挺
  • 1
新手上路,请多包涵

能不能 把具体步骤和我说一下

题主,能详细说一下么,我把 .nuxt 放入 nuxt 文件夹,创建 package.json 安装依赖后,运行 npm start 报错...

宣传栏