1，Docker 部署 Vue 项目

一、创建目录docker-demo

二、创建vue项目

1，初始化项目

npm install -g create-vite-app // 需要提前安装vite，没有可以不装
// 在docker-dem目录下执行
create-vite-app vite-demo // 创建vite项目
cd vite-demo // 进入项目目录
npm install // 安装依赖
npm install --save axios // 集成axios
// 可查看是否安装成功，可执行：npm run dev

2，修改vue，增加axios请求，如：

// vite-demo/src/componwts/HelloWorls.vue
<template>
<div>
  <h1>{{ msg }}</h1>
  <p>res=====></p>
  <p>{{res}}</p>
  <p>error=====></p>
  <p>{{error}}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
      res:null,
      error:null
    }
  },
  created(){
    axios.get('/api/json', {
        params: {}
    }).then(
    res => {
      this.res = res
        console.log(res);
    }
    ).catch(
    error => {
      this.error = error
      console.log(error);
    })
  }
}
</script>
// ps）：重新运行后，/api/json 接口 会404，当然此时这个接口还不存在，暂时写到这里，一会再调这个接口。

3，构建项目

npm run build // 此时工程根目录下多出一个 dist 文件夹，为vue的静态打包文件

三、构建vue项目镜像

1，获取 Nginx 镜像：docker pull nginx

2，创建 Nginx Config配置文件

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

// default.conf
// 该文件定义来80
server {
    listen       80;
    server_name  localhost;
    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;
    }
    location /api/ {
        rewrite  /api/(.*)  /$1  break;
        proxy_pass http://172.17.0.3:8080;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

3，创建 Dockerfile 文件

在vue根目录创建Dockerfile（非文件夹），内容为：

// FROM nginx 命令的意思该镜像是基于 nginx 镜像而构建的。
FROM nginx

4，基于该 Dockerfile 构建 Vue 应用镜像

// 运行命令：-t 是给镜像命名，. 是基于当前目录的 Dockerfile 来构建镜像。
docker build -t vuenginxcontainer .
// 查看vuenginxcontainer本地镜像，可运行命令：docker image ls | grep vuenginxcontainer

5，启动 Vue app 容器

1，创建一个名为vuenginxnew的容器

docker run \
-p 3001:80 \
-d --name vuenginxnew \
--mount type=bind,source=$HOME/WorkSpace/docker/vite-demo/nginx,target=/etc/nginx/conf.d \
--mount type=bind,source=$HOME/WorkSpace/docker/vite-demo/dist,target=/usr/share/nginx/html \
nginx
// docker run 基于镜像启动一个容器
// -p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
// -d 后台方式运行
// --name 容器名，查看 Docker 进程

2，查看容器：docker ps
3，可以发现名为 vuenginxnew的容器已经运行起来。此时访问 http://localhost:3001，就能访问到该 Vue 应用的dist静态文件

四、创建接口项目

1，用Node、express创建接口

用 Node.js web 框架 Express 来写一个服务，注册一个返回 json 数据格式的路由 index.js：

• 在目录docker-demo中新建myapi文件夹，并进入该目录
• 创建express项目 ```typescript // 1,同时设置入口文件为index.js， 得到一个package.json文件 npm init

// 2,安装express依赖 npm install express —save

// 3,在package.json同级下创建index.js文件，内容： const express = require(‘express’) const app = express() const port = 8080

app.get(‘/‘, (req, res) => res.send(‘Hello World!’)) app.get(‘/json’, (req, res) => { res.json({ code: 0, data :’33This is message from node container’ }) }); app.listen(port, () => console.log(Example app listening on port ${port}!))

// 4,运行命令，并且浏览器查看是否express配置成功(访问http://localhost:8080 页面中有hello world即为成功！) node index.js

<a name="OhG7A"></a>
### 
<a name="5Lqt1"></a>
### 五、构建接口项目镜像
<a name="izWgC"></a>
#### 1，获取 Node 镜像：docker pull node
<a name="tdiwB"></a>
#### 2，创建 Dockerfile 文件
在myapi文件夹根目录创建Dockerfile（非文件夹），内容为：
```typescript
FROM node
WORKDIR /usr/src/app
add package*.json index.js  ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "node", "index.js" ]

构建镜像的时候 node_modules 的依赖直接通过 RUN npm install 来安装，项目中创建一个 .dockerignore文件来忽略一些直接跳过的文件：

node_modules
npm-debug.log

3，基于该 Dockerfile 构建接口镜像

docker build -t nodewebserver .

4，运行容器

docker run \
-p 5000:8080 \
-d --name nodeexpressnew \
nodewebserver

六、完成

再打开http://localhost:3001/发现接口已经可以正确获取数据了
这是由于vue项目里面的nginx配置了跨域的信息：/api/指向ip：http://172.17.0.3:8080

location /api/ {
  rewrite  /api/(.*)  /$1  break;
    proxy_pass http://172.17.0.3:8080;
}

而http://172.17.0.3:8080这个ip地址是nodewebserver进程的ip地址的
获取方法如下：

// 1，执行查看docker进程，这里看到nodewebserver进程的CONTAINER ID是e461a772b02a
docker ps
// CONTAINER ID   IMAGE           COMMAND                  CREATED         STATUS         PORTS                    NAMES
// e461a772b02a   nodewebserver   "docker-entrypoint.s…"   7 minutes ago   Up 6 minutes   0.0.0.0:5000->8080/tcp   nodeexpressnew
// f0b8be38d8a8   nginx           "/docker-entrypoint.…"   3 hours ago     Up 3 hours     0.0.0.0:3001->80/tcp     vuenginxnew
// 2，执行查看容器信息命令
docker inspect e461a772b02a
// 可查看到IPAddress为：172.17.0.3
// "IPAddress": "172.17.0.3",

七、优化

1，配置负载均衡

新增一个接口服务nodeexpressnew2

docker run \
-p 5000:8080 \
-d --name nodeexpressnew2 \
nodewebserver

找到nodeexpressnew2的ip

docker ps
// CONTAINER ID   IMAGE           COMMAND                  CREATED              STATUS              PORTS                    NAMES
// 1e5d87bb1f3c   nodewebserver   "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:5001->8080/tcp   nodeexpressnew2
// e461a772b02a   nodewebserver   "docker-entrypoint.s…"   28 minutes ago       Up 27 minutes       0.0.0.0:5000->8080/tcp   nodeexpressnew
// f0b8be38d8a8   nginx           "/docker-entrypoint.…"   3 hours ago          Up 3 hours          0.0.0.0:3001->80/tcp     vuenginxnew
// 这里查到是 1e5d87bb1f3c
docker inspect 1e5d87bb1f3c
// 可查看到IPAddress为：172.17.0.4
// "IPAddress": "172.17.0.4",

修改vue项目里面的 nginx/default.conf

// 新增 upstream ，修改 location /api/ 中的 proxy_pass：
upstream backend {
  server 172.17.0.3:8080;
  server 172.17.0.4:8080;
}
……
location /api/ {
  rewrite  /api/(.*)  /$1  break;
  proxy_pass backend;
}

重新影射vue

// 重新影射vue
docker run \
-p 3002:80 \
-d --name vuenginxnew2 \
--mount type=bind,source=$HOME/WorkSpace/docker/vite-demo/nginx,target=/etc/nginx/conf.d \
--mount type=bind,source=$HOME/WorkSpace/docker/vite-demo/dist,target=/usr/share/nginx/html \
nginx
// 如果nginx无效，就重启nginx
docker exec -it vuenginxnew2 service nginx reload

参考：
http://www.dockerone.com/article/8834
https://blog.csdn.net/rosy_yang/article/details/106916341