学习｜Docker部署Vue项目

---

Docker部署Vue项目

---

构建vue项目

运行命令

yarn build / npm run build

vue工程根目录中生成一个 dist 目录，如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。

构建vue应用镜像

这里我们使用nginx镜像作为基础进行构建，具体步骤如下：

获取nginx镜像

docker pull nginx

1. docker镜像（Image）一个特殊的文件系统。Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。
2. docker 镜像相关操作有: 搜索镜像docker search [REPOSITORY[:TAG]]、拉取镜像docker pull [REPOSITORY[:TAG]] 、查看镜像列表docker image ls、删除镜像：docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。
3. docker 镜像名称由REPOSITORY和TAG组成 [REPOSITORY[:TAG]]，TAG默认为latest

创建 nginx config配置文件

在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf

server {
    listen       8091;
    server_name  localhost; 

    #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;
    }

    #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;
    }
}

把dist目录下的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下

创建Dockerfile文件

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

这段命令的详细含义是：

1. FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
2. COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
3. COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将nginx目录下的default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换nginx镜像里的默认配置。

基于该Dockerfile构建vue应用镜像

docker build -t vueContainer .

-t 是给镜像命名 . 是基于当前目录的Dockerfile来构建镜像

启动容器

docker run \
-p 8091:8091 \
-d --name vueApp \
vueContainer

1. docker run 基于镜像启动一个容器
2. p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
3. d 后台方式运行
4. -name 容器名 查看 docker 进程

此时访问 http://localhost:8091 就能访问到该vue应用