记录docker-nginx部署项目上线

孙泽辉

发布于：2021年11月19日

字数：730字

时长：3分钟

次浏览

公司里的项目要上线测试了，鄙人有幸来接手项目部署的任务，研究了一晚上，记录一下

Docker 容器构建

项目结构：（docker所处位置是项目根目录）

编写 Docker 配置文件

其实配置文件大哥已经帮我写好了，有点细枝末节我要改动一下。

# docker/nginx/dockerfile
# 指令初始化一个新的构建阶段，并为后续指令设置基础镜像，该镜像是从Public Repositories 拉取
FROM node:14.17.4 as build

# 设置在容器的工作目录，没有会自动创建
WORKDIR /front
# 将本机的 package.json 文件复制到容器
COPY ./package.json ./
# 因为之前有卡住，先清缓存，换源
RUN yarn cache clean
RUN yarn config set registry https://registry.npm.taobao.org/

RUN yarn install
# 将本机所有项目文件复制到容器 （用来build）
COPY . .
RUN yarn build

# 配置 nginx
FROM nginx
# 将本机写好的nginx配置文件覆盖到容器配置文件
COPY ./docker/nginx/config/mall.conf /etc/nginx/conf.d/default.conf
# 将容器内编译好的静态文件复制到静态文件目录下
COPY --from=build /front/dist/ /usr/share/nginx/html

编写 Nginx 配置文件

server {
  	# 监听80端口
    listen 80;
  	# 将 xxx.com 转发到 /usr/share/nginx/html 目录下
    server_name xxx.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /usr/share/nginx/html;
    autoindex on;
}
server {
    listen 80;
  	# 监听直接访问本机80端口的请求 
    server_name localhost;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

  	# 转发到 /usr/share/nginx/html 目录下
    root /usr/share/nginx/html;
    location / {
    		# 自动访问 index.html 文件
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

  	# 访问本机IP/dashboard 时 转发到 /usr/share/nginx/html/
    location /dashboard/ {
        alias /usr/share/nginx/html/;
        autoindex on;
    }
  	
    
    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   html;
    }
}

配置服务器

服务器上自带了 docker, 不讲怎么安装了，我没细看

直接进到项目文件夹下的docker文件夹里

docker build -t mall-dashboard -f nginx/dockerfile ..

-t ：-tag 给docker image 起个名

-f ：-file 指定执行文件

执行结果大概这样：

# docker build -t mall-dashboard -f nginx/dockerfile .. --no-cache
Sending build context to Docker daemon  6.073MB
Step 1/6 : FROM node:14.17.4 as build
 ---> 7528ad312b56
Step 2/6 : WORKDIR /front
 ---> Running in 5c8695fb80f1
Removing intermediate container 5c8695fb80f1
 ---> 7b7637c454f7
Step 3/6 : COPY ./package.json ./
 ---> fa1496940032
Step 4/6 : COPY . .
 ---> 8378ed5180cf
Step 5/6 : FROM nginx
 ---> ea335eea17ab
Step 6/6 : COPY ./docker/nginx/config/mall.conf /etc/nginx/conf.d/default.conf
 ---> 8494c257f05a
Successfully built 8494c257f05a
Successfully tagged mall-dashboard:latest

好了，现在已经生成了一个 docker image 了，运行它！

docker run -d -p 80:80 mall-dashboard

-d：后台运行

-p：本机与容器端口映射

效果

三个网址下的请求就都转发到编译好的静态文件了！

分别是：

101.22.22.22/dashboard
101.22.22.22
xxx.com