基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务
使用 Docker 部署,在镜像导出迁移方面很方便,部署时也只需要导入及运行等,不需要再关心环境及配置等。这篇文章讲下我是怎么用 Docker 来部署项目的。
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
文件
前端项目的运行需要使用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
文件
通过在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
来查看镜像
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
文件
写入以下内容
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
看到镜像代表成功。
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
后端服务,对于想迁移部署的时候,只需要导入出镜像,然后在需要部署的地方导入运行就行了。
更多推荐
所有评论(0)