从零学 spring cloud第10-3课：Docker部署Vue项目

我们接着上一节的内容，把我们的antdesignpro部署到我们的docker容器中。
我们先在linux的docker中把

• nginx镜像拉下来

docker pull nginx

我们还要修改一下我们的vue项目的网关连接，之前我们是在本机上做开发，所以先把它的地改成过，打开vue.config.js,找到devServer，将

target: 'http://127.0.0.1:8762/'

• 修改为

target: 'http://192.168.0.148:8762/'

因为我们的项目build的话，相当于走了生产环境，我们打开 readme文档

可以看到，这里提示了一句，如果是生产环境，那将不加载mock，但是这个项目是有登录的，所以，我们得修改一下，让它build的时候，也要加载mock的代码，所以我们就打开这个mock/index.js的文件进行修改

强行它总是加载mock的代码。

• 构建 Vue 项目

npm run build

如可出玩格化代码错误，只要在错误的地方单击，就可以选择fix current fill菜单，将整个文件的格式问题解决了。当你看到下图，就证明，构建项目成功了。

此时，我们的项目中，就会多了一个文件夹

那Vue项目这边的工作就完成了。
我们接着做 Docker那边的工作

• 创建 Nginx Config配置文件
  在项目根目录下创建 Nginx 文件夹，该文件夹下新建文件 default.conf：

server {
listen       80;
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;
}

location /spring/ {
        # springCloud后台服务地址代理转发
        proxy_pass  http://192.168.0.148:8762/;
     }

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

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html，所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

• 创建 Dockerfile 文件
  在项目的根目录下创建Dockerfile

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

将刚才的文件及dist和nginx两个文件夹，复制到linux的指定目录中

在linux中进入到这个指定的目录

• 执行以下构建镜像脚本

docker build -t myvuenginxcontainer .

• 查看创建好的镜像

docker images

当你看到这个的时候，我们的镜像就创建好了。

• 启动 Vue app 容器

docker run -p 8000:80  -d --name vueApp  --restart=always    myvuenginxcontainer

现在，就可以看到容器启动成功了。

在浏览器中输入访问地址：http://192.168.0.123:8000/

到这里，站点就部署好了。可以登录进去看一下我们上一节做的页面。当然你要先把你的springcloud启动起来。

到此，就完工了。