docker部署vue项目

取Nginx镜像

docker pull nginx

在项目根目录创建 Dockerfile 文件

在项目根目录下创建Dockerfile文件，写入下面内容

# 构建镜像命令
# 1) docker build . -t <镜像名称> --build-arg mode=prd
# 运行镜像命令 
# 1) docker run -d -p 8080:80 <镜像名称>
# 2) curl localhost:8080

ARG mode
# 接收构建变量
ENV mode=${mode}
# 定义环境变量

FROM node:14 AS node
# 指定node版本和，镜像名称
COPY ./ /app
# 复制文件到app文件夹中
WORKDIR /app
# 指定工作目录
RUN npm install && npm run build-${mode:-prd}
# 安装依赖并打包指定环境的项目

FROM nginx
RUN mkdir /app
# 新建app文件夹
COPY --from=node /app/dist /app
# 从node镜像中复制打包后的dist到当前镜像的app文件夹中
COPY nginx.conf /etc/nginx/nginx.conf
# 从默认工作目录复制nginx配置到指定路径下

RUN echo '${mode:-prd} environment published successfully !!'

在项目根目录创建 .dockerignore 文件

设置 .dockerignore 文件能防止 node_modules 和其他中间构建产物被复制到镜像中导致构建问题。

**/node_modules
**/dist

创建 nginx config配置文件

在项目根目录创建 nginx.conf 文件

Nginx 是一个能在 Docker 容器中运行的 HTTP(s) 服务器。它使用配置文件决定如何提供内容、要监听的端口等。参阅 Nginx 设置文档 以了解所有可能的设置选项。

下面是一个简单的 Nginx 设置文件，它会在 80 端口上提供你的 Vue 项目。页面未找到 / 404 错误使用的是 index.html，这让我们可以使用基于 pushState() 的路由。

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main    '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        
        location / {
            root   /app;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
        
        error_page   500 502 503 504  /50x.html;
        
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
        
        # html文件
        location ~ .*\.(html)$ {  
            add_header Cache-Control "no-cache, no-store";  
        }
        
        # css/js文件
        location ~ .*\.(js|css)?$ {
            expires 4h; 
            access_log off;
        }

        # 图片资源
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
            expires 4h;
            access_log off;
        }
    }
}

构建你的 Docker 镜像

docker build . -t <镜像名称> --build-arg mode=prd

查看构建后的镜像

docker image ls | grep <镜像名称>

基于镜像启动容器

这个例子基于官方 Nginx 镜像，因此已经设置了日志重定向并关闭了自我守护进程。它也提供了其他有利于 Nginx 在 Docker 容器中运行的默认设置。更多信息参阅 Nginx Docker 仓库。

docker run -d -p 8080:80 -d --name <容器名称> <镜像名称>
curl localhost:8080

# docker run 基于镜像启动一个容器
# -p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
# -d 后台方式运行
# --name 容器名
# <镜像名称> 镜像名

查看已启动的容器

docker ps

解决跨域问题

server {
    listen       80;
    server_name   49.235.160.132; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    
    location /pro-api { 
         # pro-api是vue项目里.env.production里的地址
            proxy_pass 1.1.1.1;  # 这里写的是你后端接口的地址
    }

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

docker常用命令

# 拉取镜像到本地
docker pull 镜像名称[:tag]

# 查看全部镜像
docker images

# 查看正在运行的容器
docker ps|grep 镜像名称

# 删除本地镜像
docker rmi 镜像ID(IMAGE ID)

# 镜像的导入导出(不规范)
# 将本地镜像导出
docker save -o 导出的路径 镜像ID

# 加载本地的镜像文件
docker load -i 镜像文件

# 修改镜像名称
docker tag 镜像ID 新镜像名称:版本

容器的操作

# 1.运行容器
# 简单操作
docker run 镜像ID|镜像名称[:tag]
# 常用参数
docker run -d -p 宿主机端口:容器端口 --name 镜像ID|镜像名称[:tag]
# -d 代表后台运行容器
# -p 宿主机端口:容器端口：为了映射当前Linux的端口和容器的端口
# --name 指定容器名称

# 2.查看正在运行的容器
docker ps [-qa]
# -a：查看全部的容器，包括没有运行的
# -q：只查看容器的ID

# 3.查看容器的日志
docker logs -f 容器ID
# -f：可以滚动查看日志的最后几行

# 4.进入到容器内部
docker exec-it 容器ID /bin/sh

# 5.退出容器
exit

# 6.删除容器（删除容器前，需要停止容器）
# 停止一个容器
docker stop 容器ID
# 停止全部容器
docker stop $(docker ps -qa)
# 删除一个容器
docker rm 镜像ID
# 删除全部容器
docker rm $(docker ps -qa) 删除全部容器

# 6.启动容器
docker satrt 容器ID