Docker部署Vue项目原来可以那么好用

一. 前言

之前花了点时间去讲解了一下nginx的基本概念和一些配置语法，有兴趣的jym可以去看一下从前端角度趣解nginx，那么介绍完了，我们不能不练练手呀。这篇文章就讲解一下如何部署一个Vue项目，一样的还是从前端角度，玩一玩部署！

我们对部署的整体流程处理如下：

打包一个Vue项目，通过生成的dist文件夹和nginx的镜像生成一个前端镜像，然后通过这个前端镜像实例化启动一个容器 前端项目部署。
启动一个node服务，简单写几个接口。然后通过启动一个node镜像，运行一个nodeserver容器，提供后端接口。后端服务部署
通过nginx代理，让前端接口的请求转发到nodeserver容器上 nginx代理转发。

ok，按照这个步骤我们开始！！！

二. Docker介绍

2.1 为什么选择Docker

简单来说，在日常的开发和部署中有一个痛点就是环境的问题。比如一个前端项目的运行部署，就需要node、Tomcat、nginx等。我们需要协调好这些环境的版本，以及在不同操作系统中的兼容性问题。最常见的一个例子，就是一个Vue项目clone下来，很少能直接跑起来，大概率都要去处理一下node版本以及一些依赖的安装版本问题等。

那么如何解决这些环境导致的问题，那Docker就是一个不错的选择。

2.2 Docker的核心概念

首先：Docker 是一个开源的应用容器引擎 。使用Docker的目的，就是做到一次封装，一生无忧。比如，我们一个Vue项目通过Docker处理之后，可以到处使用，不用担心环境问题。

总的来说，docker就是一个封闭的沙盒，这个沙盒不会收到外界环境影响，随用随放。

2.3 Docker的术语

要更好的使用Docker，肯定要了解一下内部的专业说法。

镜像 简单来说：就是复制的程序，是为容器运行提供需要的程序、资源、配置等。它是一个静态的概念，其的内容在构建之后就不会在发生变化。通过镜像我们可以启动容器。

容器 一个Docker镜像可以例化出来多个容器，每个容器之间是独立的。Docker的容器是用来运行程序的，是静态的。可以理解为Docker的容器就是一个操作系统，目的是运行我们写的程序。

仓库 Docker中的仓库的概念就是用来存储和管理镜像的。

总结一下，他们之间的关系如下：

核心概念就是，通过生成镜像然后去创建容器,最后让程序跑在容器上。

搞清楚这几个概念之后，我们就可以开始使用Docker了。

三. 前端部署流程

3.1 Vue项目搭建和打包

这个没什么好说的，可以通过vite创建一个Vue项目也可以使用现成的。

然后执行:

arduino 复制代码

pnpm run build

执行完成之后，会出现一个dist文件夹在根目录。

接下来，就是构建一个静态服务目录，然后把文件夹放进去，访问这个静态服务就可以访问这个页面。

3.2 构建前端流程

3.2.1 镜像下载

我们这里先把nginx镜像拉下来。

docker pull nginx

可能会报这个错：

这个问题是因为国内的镜像源不能用了，非常扯淡。目前试了几个镜像源大家可以拿过去试试，在docker desktop里面修改一下Docker engine里面的配置。

js 复制代码

"https://docker.1ms.run",
"https://registry.docker-cn.com",
"https://dockerhub.azk8s.cn"

如果大家有别的可以使用的镜像源欢迎发到评论区！

保存之后，我们在控制台继续之前的操作：

看到这样就说明nginx镜像拉成功了。可以准备下一步操作了。

3.2.2 nginx配置

回到我们的项目中，在跟目录上创建nginx文件夹，之后新建nginx.conf文件。如下：

完成之后，我们在里面写一点nginx配置代码。这里有个小技巧，因为在vscode中nginx配置是没有代码提示和高亮提醒的，看起来不是很舒服，可以安装一下NGINX Configuration Language Support这个插件，比较好用。（亲测还可以）

回到正文，nginx.conf里面代码如下：

nginx 复制代码

server {
    listen 80;   /*端口号是80*/
    server_name localhost;
    location / {
        root   /usr/share/nginx/html;  /*nginx默认会从这个路径下加载网页，这是nginx默认的网页根目录*/ 
        index  index.html index.htm;
    }

    error_page  404              /404.html;  /*错误404处理*/
    error_page  500 502 503 504  /50x.html;  /*错误5XX处理*/

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

基本的配置如上所述。有关nginx的介绍，大家可以去看我之前的文章从前端角度趣解nginx。

3.2.3 创建Dockerfile文件

我们回到项目的根目录上，新建一个Dockerfile文件。

(这里注意一下，文件名不用大写，也可以不是dockefile，也可以不放在根目录上，我们只需要在build的时候通过 -f .../Dockerfile参数指定其他文件作为 Dockerfile。但是习惯上还是用Dockerfile)

dockerfile 复制代码

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

FORM nginx是指改镜像基于nginx:latest镜像构建的（可以在后面接上nginx具体版本）
COPY dist/ /usr/share/nginx/html/是指把dist/文件夹下的所有静态文件，放到nginx镜像中/usr/share/nginx/html/目录下。（因为这个路径是nginx默认的加载路径，放在这里不会出现路径错误问题）
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf 跟上面一样，把本地的nginx配置文件复制到nginx默认的配置文件。（/etc/nginx/conf.d/default.conf是nginx默认配置文件的路径）

所以这里的dockerfile主要干了三件事情：

指定默认镜像
复制需要部署的静态文件到对应的路径下
复制对应的配置文件到对应的路径下

完成以上配置后，我们就可以开始生成一个前端镜像了。

3.2.4 前端镜像的构建

回到根目录上，打开控制台，开始构建！通过使用docker build命令构建前端镜像。当然了，我们需要先去了解一下Docker的基本语法。

我们执行一下：

erlang 复制代码

docker build -t vuecontainer .

-t是给镜像命名
.是基本当前目录下的dockerfile

执行完成之后，我们回到docker desktop里面看一下：

可以看到现在的Images里面有两个镜像，一个是之前pull的nginx，一个是我们创建的vuecontainer。

我们在控制台上输入

arduino 复制代码

docker image ls

也可以看懂docker的运行的镜像。

OK！到这步，镜像就弄好了，接下来就要创建运行的容器了。

3.2.5 容器运行

我们只需要指定当前运行的容器环境是我们创建的vuecontainer，就可以完成容器的运行。这里要用到docker run命令。

具体语法如下：

ok，语法也很简单，按照语法我们执行一下下面的命令：

js 复制代码

docker run -d -p 3000: 80 --name vueClient vuecontainer

执行之后会出现一串哈希字符串。

我们回到docker desktop里面看一下：

在Container一栏中，就看到新建的vueClient容器。然后我们点击一下3000:80。就会出现我们部署好的页面！

四. 后端接口部署流程

4.1 使用koa搭建接口服务

接下来，我们实现一个get接口，使用koa搭建一个api接口服务。

新建一个文件夹koa-app

安装依赖：

css 复制代码

npm i koa koa-router nodemon

然后新建一个src/main.js

ini 复制代码

const Koa = require('koa');
const Router = require('koa-router');
 
const app = new Koa();
const router = new Router();
 
router.get('/about', async (ctx) => {
  ctx.body = {
    code: '0',
    message: 'Hello, World!'
  }
});
 
app.use(router.routes());
app.use(router.allowedMethods());
 
app.listen(1000);

目标是新建一个get请求，路径是http://localhost:1000/about

完成之后，修改一下package.json:

json 复制代码

  "scripts": {
    "server": "nodemon src/index.js"
  },

然后在控制台运行一下：npm run server就可以了。

4.2 Docker运行Koa容器

4.2.1 安装node镜像

因为我们是用koa写的接口，所以内部需要node镜像。

docker pull node

完成之后，我们可以看到多一个node镜像。

4.2.2 编写Dockerfile文件

我们回到刚才用koa搭建项目的根目录下：新建一个Dockerfile文件。

do 复制代码

# 指定镜像
FORM node

# 复制文件到容器中 .就是当前目录下所有的文件。 /home/app就是容器的路径（自定义）
ADD . /home/app  

# 进入工作区（跟复制的文件路径一致）
WORKDIR /home/app

# 安装依赖
RUN npm install

# 暴露端口
EXPOSE 1000

# 启动服务
CMD["node", "src/index.js"]

这里要注意一下，可以设置一下.dockerignore文件，因为依赖是需要安装的，不需要复制到容器中（类比gitignore）。

在同级目录下新建一个.dockerignore

js 复制代码

node_modules

4.2.3 接口容器运行

完成上面操作之后就可以构建镜像了。

在控制台输入：

erlang 复制代码

docker build -t koa_server:v1.0.0 .

没什么好说的，跟之前前端搭建一样。然后可以看到一个新的镜像。

OK。然后我们基于这个镜像运行一个node容器。

css 复制代码

docker run -d --name koa_server_container -p 9000:1000 koa_server:v1.0.0

-p 9000:1000表示指定本地的1000端口隐射到容器内的9000端口。

然后我们可以看一现在的docker desktop

可以看到已经运行了一个koa_server_container，然后我们在页面上输入一下http://localhost:9000/about

ok，完成了后端接口的部署。

五. 接口调用和服务转发

我们现在回到之前写的这个Vue项目中，去请求一下这个接口。安装一下axios

js 复制代码

pnpm i axios

然后请求一下我们写的接口：

javascript 复制代码

axios.get('/prod-api/about').then(res => {
  console.log(res)
})

ok！我们下一步操作是把接口的请求通过nginx转发到koa_server_container这个容器的ip和端口下面。

5.1 ip地址获取

现在要获取一下接口的ip地址和端口号。

端口号就是前面的1000
可以通过docker desktop查看一下nodecontainer。

里面的ipAddress就是容器的ip地址。

5.2 nginx转发

按照步骤来，我们需要把/prod-api的请求接口代理到server容器上。修改一下nginx.conf

js 复制代码

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

rewrite: 就是把/prod-api路径重写替换。类似于在vue中配置proxy代理。

proxy_pass：就是对应代理到server容器上的地址。

完成之后，我们重新打包一个镜像，生成一个容器。（跟第三章步骤一样）然后我们打开一下网页：

OK，代理完成！！这里留一个坑，放到后续文章中更新，如何在修改nginx配置的时候，不用重新生成镜像？

六. 总结

简单讲了一下，从前端的打包部署，到后端的服务部署，不算难，但是对没有搞过部署的jym还是有帮助的。顺便也使用一下nginx和docker。后续会继续更新部署、工程化相关的文章，大家有兴趣的可以关注一波哦！