【前端Docker部署实战】Docker镜像+Nginx配置部署 Vue 项目

GeekQiaQia
13,089 阅读3分钟

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。

Nginx 是一个高性能的 HTTP 和反向代理服务器，选用 Nginx 镜像作为基础来构建vue应用镜像。

官网:Docker起步

工具:MobaXterm

安装Docker

 yum install docker

启动服务 start docker

systemctl start docker

Docker中拉取nginx镜像

docker pull nginx

创建配置文件

配置Dockerfile

  • 自定义构建镜像的时候基于 Dockerfile 来构建。
  • FROM nginx:latest: 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
  • COPY dist/ /usr/share/nginx/html/ :命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
  • COPY default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。
FROM nginx:latest
MAINTAINER xiyangbai@outlook.com # 维护者信息

# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

配置default.conf

upstream my_server{
  server 121.41.4.33:3000; # 后端server 地址
  keepalive 2000;
}

server {
    listen       80;
    server_name  www.xxx.com; # 修改为docker服务宿主机的ip/域名，比如我之前说的11.22.33.44
    
    #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;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
     #  这里就是和vue本地代理的意思一样，已api开头的路径都代理到本机的3000端口
    location /api/ {
        proxy_pass http://my_server/api;
        proxy_set_header Host $host:$server_port;
        rewrite ^/api/(.*) /$1 break;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
    
    }

将打包项目，把dist文件夹和刚刚创建的Dockerfile,default.conf放到同一目录

image.png

构建镜像 build images

docker build -t admin .

image.png

查看镜像images

docker images

image.png

启动容器

docker run -d -p 8136:80 --name dooringx-admin admin
  • -d 后台方式运行
  • -p 8136:80 端口映射，将宿主的8136端口映射到容器的80端口
  • –name 容器名 镜像名

image.png

查看运行的容器 container

docker ps

查看容器日志logs

# 当容器状态异常时查看日志
docker logs

image.png

移除镜像rm images

  • 停止运行容器并移除容器stop && rm 
// 停止运行容器 docker stop<容器ID或容器名>
docker stop dooringX-Admin

// 移除容器 docker rm <容器ID或容器名>\
docker rm dooringX-Admin

// 查看当前容器
docker container ls -a

image.png

  • 移除镜像 image rm
 docker image rm doorxing-admin

最后打开浏览器输入你的服务器ip/域名 端口号:8136，呐，启动啦

image.png

后续根据需要可以结合github webhooks 以及Jenkins 实现Docker自动化部署

avatar
文章
阅读
粉丝