Vue应用镜像化

编写Nginx配置文件default.conf

server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
                   try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://10.191.56.159:32153/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

编写Dockerfile文件

FROM nginx:1.17.1
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

制作镜像

$ docker build -t demo-web:v1 .
docker buildx build --push --tag 0xa0000/buildx-example:latest --platform linux/amd64,linux/arm64 .

推送镜像至镜像仓库

$ sudo docker login --username=tb19388438 registry.cn-hangzhou.aliyuncs.com
$ sudo docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/xcrj/light:[镜像版本号]
$ sudo docker push registry.cn-hangzhou.aliyuncs.com/xcrj/light:[镜像版本号]

FAQ：如何自动化构建前端代码？

在SpringBoot应用镜像化中，我们通过maven插件docker-maven-plugin在打包Jar时自动构建、发布了docker镜像，而在本文中确是手动编译、构建、发布，这样就造成了docker镜像的名称、版本号无法统一管理。这时我们就需要引入前端构建的工具 gruntjs。

创建容器并启动

$ docker run --name demo-web -p 80:80 demo-web:v1

使用DockerCompose部署应用

version: '3'
services:
  light-fast-front-end:
    build:
      context: .
      dockerfile: Dockerfile
    image: xcrj/front-end:1.0.0
    container_name: light-fast-front-end
    restart: always
    volumes:
      - ./docker/etc/nginx/:/etc/nginx/conf.d/
    ports:
      - "80:80"