Nuxt部署到Docker

Nuxt部署到Docker

1 复制项目到服务器

首先在Nuxt项目中，执行以下命令

npm run build

执行后整个项目目录为

进入服务器，在root目录下，创建nuxt文件夹

mkdir nuxt

把上面的所有文件，除了.idea、node_modules、package-lock.json之外，全部复制到nuxt文件夹下

在上面的图片中会看到有两个之前没有的文件，docker-compose.yml和Dockerfile，下面为两个文件的内容，因为我是在本地编辑之后才复制进去的

(这里需要说到的是，对于docker-compose我不太熟悉，但是之前没用到docker-compose时，我是把项目全部拉近服务器，然后在那个文件夹里面去使用PM2管理器启动项目，但是总有各种错误，甚至没办法进行访问。后来请教了大佬之后才有了以下的方法)

Dockerfile

#1、基于镜像node版本
FROM node:16.14.0
#2、作者
MAINTAINER wangxin
#3、参数，node的环境为生产环境
ENV NODE_ENV=production
#4、任意ip
ENV HOST 0.0.0.0
#5、容器内创建目录/hello
RUN mkdir -p /nuxt
#6、复制当前的内容到容器内容部目录/hello
COPY . /nuxt
#7、切换工作目录到/hello
WORKDIR /nuxt
#8、暴露端口3000，默认端口
EXPOSE 3000
#9、清除缓存
RUN npm cache clean --force
#10、安装依赖
RUN npm install --no-package-lock --registry=https://registry.npm.taobao.org
#11、构建，生成dist文件
RUN npm run build
#12、start
CMD ["npm","start"]

docker-compose.yml

version: "3"
services:
  node:
    build: .
    ports:
      - "3000:3000"

（再次提醒，这两个文件可以在本地编辑后上传，不然直接vim总有各种各样的错误哈哈哈哈）

2 开始进行镜像构建

（原来docker-compose构建之后也会形成一个新的镜像，因为我用得少，所以不太了解）
在nuxt目录下执行以下命令

docker-compose build

接着通过查看镜像命令看是否构建成功

说明成功了，接着创建容器并运行，这个命令其实等同于平时我们的
docker run … ，但是这个命令一定要在nuxt目录里执行，当然，如果你创建的不是该目录名字，那就替换成你刚才创建的目录名即可

docker-compose up

执行之后可用docker ps -a查看容器，运行成功后，用服务器公网ip:3000即可访问nuxt项目