likes
comments
collection
share

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

作者站长头像
站长
· 阅读数 19

Docker 作为目前最流行的容器化技术，对于在持续集成、可移植性方面有着很大的优势。最近的开发中也确实体会到了这一好处，因为我们项目涉及给客户私有化部署及演示等，使用 Docker 部署，在镜像导出迁移方面很方便，部署时也只需要导入及运行等，不需要再关心环境及配置等。这篇文章讲下我是怎么用 Docker 来部署项目的。

一、安装 Docker

linux服务器使用curl下载快速安装的shell脚本

curl -fsSL get.docker.com -o get-docker.sh

下载完成后，可以ls命令查看一下。已经存在的话，使用sh命令执行这个脚本

sh get-docker.sh

注意如果不是root用户，需要使用sudo su获取超级管理员权限。

安装完成后启动一下Docker Server

systemctl start docker

使用docker version命令能看到Client和Server就启动成功了。

二、使用 Docker 部署前端项目

1.首先在项目根目录创建 nginx.conf 文件

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

前端项目的运行需要使用nginx来作为服务器，添加的nginx.conf就是nginx的配置文件。写入以下内容

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html; # nginx的静态资源目录
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 对于 Vue 或 React项目使用history路由需要
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

2.项目跟目录创建Dockerfile文件

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

通过在Dockerfile文件中写前端镜像构建的指令等，方便统一管理我们的构建指令。写入以下内容

FROM node
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . /app
RUN npm run build

FROM nginx
COPY --from=0 /app/dist /usr/share/nginx/html
COPY --from=0 /app/nginx.conf /etc/nginx/conf.d/default.conf
  • FROM node为第一阶段，主要是实现前端包的安装及项目打包，如果有的项目需要指定node版本，可以通过node:16这样的方式来指定，会自动下载16的最新版本
  • FROM nginx为第二阶段，--from=0表示把第一阶段构建完成的dist目录及我们之前添加的nginx.conf拷贝到nginx对应的目录中

3.通过Dockerfile来构建镜像

在项目的根目录下执行

docker build -t frontend-image .

其中frontend-iamge为镜像名，根据自己项目名设置，构建完成后可以通过docker images来查看镜像

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

4.通过镜像运行容器

docker run -itd -p 8081:80 --name frontend-container frontend-image
  • -itd：表示后台运行
  • -p 8081:80：表示把nginx容器内的80端口映射到宿主机的8081端口，最后我们宿主机IP:8081的方式访问
  • --name：指定启动后的容器名

三、使用docker部署node后端服务

1.同样在docker根目录创建Dockerfile文件

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

写入以下内容

FROM node
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . .
EXPOSE 7001
CMD npm start
  • 指定基础镜像为node，然后指定工作目录为容器内/app
  • 先拷贝package.json和package-lock.json到工作目录(此步骤是为了能应用包缓存)，然后安装包
  • 最后拷贝项目文件到工作目录
  • CMD是指定在容器启动时执行的命令

2.通过镜像启动容器

docker build -t server-image .

server-image为构建后的镜像名，根据项目设置。构建后通过docker images看到镜像代表成功。

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

3.通过镜像启动容器

docker run -itd -p 7001:7001 --name server-container server-image

启动成功后就可以通过宿主机ip:7001访问node接口服务

四、镜像导出及导入

在我们想迁移部署时，通过对我们之前的镜像进行导出

docker save frontend-image > frontend-image.tar

在需要部署的地方导入

docker load < frontend-image.tar

到此，就完成了使用docker来部署我们的前端项目及node后端服务，对于想迁移部署的时候，只需要导入出镜像，然后在需要部署的地方导入运行就行了。