前端配置dockerfile部署

参考网址

dockerfile配置

根目录创建名称为“Dockerfile”文件

# 定制的镜像都是基于 FROM 的镜像，这里将node:12.18.4设成基础镜像
# node后面跟的tag，可以在docker hub中（上方网址）查找项目所需的tag
FROM node:12.18.4 as build

# 指定工作目录。用 WORKDIR 指定的工作目录，会在构建镜像的每一层中都存在。
# WORKDIR 指定的工作目录，必须是提前创建好的
WORKDIR /tmp

# 复制指令，从上下文目录中复制文件或者目录到容器里指定路径。
# COPY [--chown=<user>:<group>] <源路径1>...  <目标路径>
# [--chown=<user>:<group>]：可选参数，用户改变复制到容器内文件的拥有者和属组。
# <目标路径>：容器内的指定路径，该路径不用事先建好，路径不存在的话，会自动创建。
COPY . .

# RUN：用于执行命令
# 清理npm缓存
# 以下两个RUN命令可简化为RUN npm cache verify && npm cache clean -f
RUN npm cache verify
RUN npm cache clean -f

# 安装依赖并构建
RUN npm install --registry https://registry.npm.taobao.org && npm run build

# 以nginx:1.12.2为基础镜像
# nginx后面跟的tag，可以在docker hub中（上方网址）查找项目所需的tag
FROM nginx:1.12.2

# 修改/usr/share/nginx/html里面的内容为前端需要部署的静态文件，这样前端就跑在nginx上了
WORKDIR /usr/share/nginx/html
RUN rm -f *
COPY --from=build /tmp/dist .

# 替换default.conf文件，解决单页面部署后刷新404问题
COPY --from=build /tmp/default.conf /etc/nginx/conf.d/default.conf

注意： Dockerfile 的指令每执行一次都会在 docker 上新建一层。所以过多无意义的层，会造成镜像膨胀过大。以 && 符号连接命令，这样执行后，只会创建 1 层镜像。

default.conf配置

根目录创建名称为“default.conf”文件

server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /usr/share/nginx/html;
        # index  index.html index.htm;
        try_files $uri /index.html;
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
        }
     
    }
    
    # 若前后台服务不是部署在一起，此处需要配置后台服务地址，否则不用配置
    location /api {
      proxy_pass http://nora-backend-dev.com/;
    }
    # location = /index.html {
    #     add_header Cache-Control "no-cache, no-store";
    # }
    #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;
    }
}

本地docker测试

在项目目录下执行以下命令

构建镜像

docker build -t my-image .

根据镜像创建容器

docker run --name my-container -p 8088:80 -d my-image

指定dockerfile文件执行以下命令

构建镜像

docker build -f DockerfileLocal . -t my-image

创建容器run

docker run -p 8088:80 --rm my-image

访问地址

打开浏览器，访问 localhost:8088。如果访问不了，查看容器端口号是否在8088

// 查看容器列表
docker ps

// 查看该容器端口
docker port my-container

// 停止运行的容器
docker stop [container name]

// 删除容器
docker rm [container name]

// 查看镜像列表
docker images

// 删除镜像
docker rmi [image name]

// 查看容器日志
docker logs [container name]