本文的内容
显示
1.
多克变换
1.1.
修改的目录结构
2.
Docker过程中的难点及解决方法
2.1.
弹簧靴双配置切换
2.2.
动态配置axios的baseUrl地址
2.3.
Nuxt无法访问Docker中的主机ip。
2.3.1.
这就产生了一个问题。
2.3.2.
怎么解决？
2.4.
Dockerfile环境参数的统一设置
3.
摘要
4.
推荐阅读
今年年初，我完成了自己的成名博客系统的实现。当时我还做了一篇博文，Spring-boot Vue=Fame，博客的总结，作为记录和介绍。从实现完成到现在，也根据实际使用情况进行了断断续续的更新。
只是每次在线部署的时候都觉得有点麻烦，因为我的服务器内存太小了。即使我只更新了fame-front部分的代码，我在执行npm build的时候也必须关闭我后端服务(fame-server)的进程，否则服务器会卡死(惨)。
而且这个项目是前后端分离的，博客前台页面也使用了Nuxt框架进行seo。如果是第一次部署或者迁移服务器，会非常麻烦。如果只部署一次，则需要执行以下步骤：
安装mysql，修改相关配置文件，设置编码时区等。然后重新启动。
下载安装java，配置java环境。
下载安装maven，配置maven环境。
下载安装nginx，修改配置文件，设计反向代理等。
启动弹簧启动项目。
打包vue项目npm安装，npm运行构建等。
启动nuxt项目，npm安装，npm运行启动等。
如果你能成功完成这七个步骤，你将是幸运的。如果中间有哪一步错了，你可能就要回去找出哪一步错了，然后重新部署。
面对这些需求，Docker是解决这些问题的大杀器。无论是它的虚拟化技术隔离各个容器使其资源互不影响，还是一致的运行环境，以及docker-compose的一键部署，这些问题都完美解决。
项目地址：https://github.com/zzzzbw/Fame.
Docker和Docker-compose安装
Docker和Docker-compose的功能和用法可以在一个在线中文文档Docker-从入门到练习中看到。
以下是在Centos7中安装和配置Docker和Docker-compose的shell脚本。其他操作系统可以参照修改进行安装。Docker的版本是docker-ce，Docker-compose的版本是1.22.0。
#!/bin/sh
# #更新# #
yum-yupdate
# # #安装docker###
#安装一些必要的系统工具
sudoyuminstall-yyum-utils设备映射器-持久数据lvm2
#添加软件源信息
sudo yum-config-manager-add-repo http://mirrors . aliyun . com/docker-ce/Linux/centos/docker-ce . repo
#更新yum缓存
sudoyummakecachefast
#安装Docker-ce
sudoyum-yinstalldocker-ce
#启动docker并将其设置为boot (centos7)
systemctlstartdocker.service
systemctlenabledocker.service
#将docker替换为国内来源
echo \ ' { ' registry-mirrors '[' https://registry . docker-cn . com ']，' live-restore 'true } \ '/etc/docker/daemon . JSON
systemctlrestartdocker
#安装dokcer-compose
sudocurl-l https://github . com/docker/compose/releases/download/1 . 22 . 0/docker-compose-` uname-s `- ` uname-m `- o/usr/local/bin/docker-compose
chmod x/usr/local/bin/docker-compose
#安装命令完成工具
yum-yinstallbash-完成
curl-l https://raw . githubusercontent . com/docker/compose/$(docker-compose version-short)/contrib/completion/bash/docker-compose/etc/bash _ completion . d/docker-compose
# # # docker安装结束# # #
多克变换
修改的目录结构
我们先来看看改革后的项目结构。
Fame。env/。env//docker-撰写环境参数配置文件
Docker-compose.yml//docker-compose文件
fame-docker
docker file name-front//name-front的文件。
fame-server//fame-server的Dockerfile文件。
fame-admin
docker file文件的名称-管理//名称-管理。
nginx.conf//name-admin的nginx服务器配置文件。
fame-mysql
名称-MySQL-Dockerfile//MySQL的docker file文件
mysqld.cnf//mysql配置文件mysqld.cnf。
fame-nginx
nginx-Dockerfile//整个项目的nginx服务器的Dockerfile文件文件文件
nginx.conf//整个项目的nginx的配置文件
fame-admin//博客管理后台，基于某视频剪辑软件元素
fame-front//博客前端，基于Nuxt
fame-server//博客服务端，基于弹簧靴
为了不破坏原有项目的结构，无论前端还是后端的码头工人的相关配置文件全部提取出来，单独放在了名誉码头工人文件夹中。
docker-compose.yml放在项目根目录下，直接在根目录运行命令：docker-撰写向上-d
[root @ localhostFame]# docker-compose up-d
开始框架-前端.
开始游戏-管理.
开始框架-前端.完成的
开始游戏-管理.完成的
启动框架-nginx.完成的
就启动项目了，再也不用重复繁琐的步骤！
改造后的docker-compose.yaml文件
版本："3"
服务：
fame-nginx:
容器名：fame-nginx
构建：
上下文：/
dockerfile:/fame-docker/fame-nginx/nginx-docker文件
端口：
-'80:80'
体积：
-./logs/nginx:/var/log/nginx
依赖于：
-名誉服务器
-名气-管理
-名誉-前线
名气-mysql:
容器名：fame-mysql
构建：
上下文：/
dockerfile:/fame-docker/fame-MySQL/fame-MySQL-docker文件
环境：
MYSQL_DATABASE:fame
MYSQL _ ROOT _密码：根
MYSQL_ROOT_HOST:\'%\ '
TZ:亚洲/上海
暴露：
-'3306'
体积：
-./MySQL/MySQL _ data:/var/lib/MySQL
重新启动：总是
名声-服务器：
容器名称：名气-服务器
重新启动：总是
构建：
上下文：/
dockerfile:/fame-docker/fame-server-docker文件
工作目录：/应用程序
体积：
-./fame-server:/app
-~/.m2:/root/.m2
-./logs/fame:/app/log
暴露：
-'9090'
命令：mvncleanspring-boot:run-Dspring-boot。快跑。profiles=docker-dmaven。测试。跳过=真
依赖于：
-名气-mysql
名气-管理：
容器名：名声管理
构建：
上下文：/
dockerfile:/fame-docker/fame-admin/fame-admin-docker文件
参数：
基本网址：$ {基本网址}
暴露：
-'3001'
名声在外：
容器名称：名誉-前台
构建：
上下文：/
dockerfile:/fame-docker/fame-front-docker文件
环境：
基本网址：$ {基本网址}
代理主机：$ {代理主机}
代理端口：$ {代理端口}
暴露：
-'3000'
docker-compose.yml的结构和刚才目录结构大体类似，也是分以下几个部分
fame-nginx
名声-mysql
名誉服务器
名气-管理
名声在外
这个docker-compose.yml中有几个要点
名声-mysql和名誉服务器的重新开始要设置为总是，因为目前码头工人-撰写是没有一个方案可以解决容器启动的先后的问题的。即使设置了取决于，那也只是控制容器开始启动的时间，不能控制容器启动完成的时间，所以让名声-mysql和名誉服务器这两个容器设置重启，防止弹簧靴在关系型数据库启动完成之前启动而报错启动失败
fame-server，fame-mysql，fame-nginx这三个容器都设置了体积，把容器里的日志日志文件挂载到宿主机的项目目录里，方便随时看日志文件
名声-mysql容器的关系型数据库存储文件也设置了卷挂载在项目目录里(./MySQL/MySQL _ data:/var/lib/MySQL)，这个建议大家可以根据实际的情况设置到宿主机的其他目录里，不然不小心删除项目的话那么容器里的数据库数据也都没了
几个镜像的Dockerfile文件文件大部分都比较简单，这部分就不全部详细介绍了，可以直接去我项目中了解。
码头工人化过程的困难和解决方法
弹簧靴双配置切换
为了能够让弹簧靴能够在开发环境和码头工人环境下快速切换，需要将弹簧靴的配置文件进行修改
fame-server
.
resources
应用程序开发属性
应用程序-docker.properties
application.properties
在原有的应用程序。属性基础上增加应用程序开发属性和应用程序-docker.properties配置文件，把应用程序。属性里的数据库日志等信息分别放到应用程序开发属性和应用程序-docker.properties这两个文件中，实现开发环境和码头工人环境的快速切换。
#应用程序。属性文件
#端口号
server.port=9090
#mybatis
my batis . type-aliases-package=com . zbw . fame . model
#映射器
mapper . mappers=com . zbw . fame . util . my mapper
mapper.not-empty=false
mapper.identity=MYSQL
#邮件
spring . mail . properties . mail . SMTP . auth=true
spring . mail . properties . mail . SMTP . starttls . enable=true
spring . mail . properties . mail . SMTP . starttls . required=true
#默认属性
active=dev
~
#application-docker.properties文件
#数据源
spring . data source . driver class name=com . MySQL . JDBC . driver
spring . data source . URL=JDBC:MySQL://fame-MySQL:3306/fame？use unicode=true character encoding=utf-8 use SSL=false
spring.datasource .用户名=root
spring . data source . password=root
#日志
logging.level.root=INFO
logging . level . org . spring framework . web=INFO
logging.file=log/fame.log
application-dev.properties的内容与application-docker.properties文件类似，只是根据开发环境修改了mysql和日志配置。
动态配置axios的baseUrl地址
Axios插件在fame-admin和fame-front中用于启动和获取来自fame-server服务器的请求。要在axios中配置服务器url地址baseUrl，开发环境、Docker环境、生产环境的Url可能不一样，每次修改都有点麻烦。虽然我只需要配置两个地方，但是代码整洁性不允许我对这个配置进行硬编码。
1.修改fame-admin(Vue)使其兼容手动部署模式和Docker模式。
Fame-admin是在Vue CLI 3的基础上构建的。与cli 2.0相比，webpack的一些配置文件是官方封装的，所以没有config和build文件夹。不过相应的官网也给出了一些更方便设置的配置参数。
官方文件中提到：
只有以VUE_APP_开头的变量才会被webpack.DefinePlugin静态嵌入到客户端的包中。您可以在应用程序代码中访问它们，如下所示：
console . log(process . env . vue _ APP _ SECRET)
在构造过程中，process.env.VUE_APP_SECRET将被相应的值替换。在VUE应用程序秘密=秘密的情况下，它将被替换为“sercet”。
使用此功能设置环境变量，以便在Docker模式和手动部署模式下动态设置baseUrl的值。
在fame-admin目录下创建文件server-config.js，并写入以下内容。
consists prod=process . ENV . node _ ENV===\ ' production \ '
const localhost=\ ' http://127 . 0 . 0 . 1:9090/\ '
constbaseUrl=process . env . vue _ APP _ API _ URL | | localhost
constapi=isProd？baseUrl:localhost
导出默认值{
伊斯普罗德，
美国石油学会(American Petroleum Institute)
}
那么只要环境变量中有VUE_APP_API_URL的值，并且node _ env==\' production \ '那么baseUrl就等于VUE_APP_API_URL的值，否则就是localhost的值。
然后参考axios配置文件中的文件设置。
//fame-admin/src/插件/http.js
.
importserverConfigfrom\ '/./server-config\ '
constAxios=axios.create({
base URL:server config . API \ ' API/\ '
.
})
.
现在只需将docker的环境变量设置为一个值VUE _应用程序_应用程序接口_网址，并在相应的docker文件中添加一个步骤。
env vue _ APP _ API _ URL http://xx . XXX . XXX . XXX
2.修改fame-front(Nuxt)使其兼容手动部署模式和Docker模式。同样的，用Nuxt修改fame-front博客的前景也是用同样的思路。在Nuxt的官方文档中，我写道：
js允许您配置在客户机和服务器之间共享的环境变量。
例如(nuxt.config.js):
模块.导出={
环境：{
base URL:process . env . base _ URL | | \ ' http://localhost:3000 \ '
}
}
在上面的配置中，我们创建了一个baseUrl环境变量。如果应用程序设置了BASE_URL环境变量，则baseUrl的值等于BASE_URL的值；否则为http://localhost:3000。
所以我们要做的就是像官方文档说的那样，在文件nuxt.config.js中添加代码。
模块.导出={
环境：{
base URL:process . env . base _ URL | | \ ' http://localhost:3000 \ '
}
}
然后在server-config.js文件，axios配置文件名-front/plugins/http.js和对应的Dockerfile中写与fame-admin部分相同的代码。
现在baseUrl的设置已经从代码的硬编码中解放出来了，但实际上我们只是把这个参数的编码从代码转移到了Dockerfile文件中。如果要修改的话，还得在这两个文件里找，修改，也不方便。这个问题将在以后解决，以统一所有的环境配置。
Nuxt无法访问Docker中的主机ip。
首先我们来解释一下为什么博客前端要像博客后端一样单独使用Nuxt而不是Vue，因为博客前端有SEO需求，Vue对搜索引擎非常不友好。
所以Nuxt的页面是服务器端渲染(SSR)。
这就产生了一个问题。
fame-front的页面在渲染之前必须从fame-server服务器获取数据，但是各个docker容器是相互独立的，相互之间的内部访问只能通过容器名来访问。例如，如果容器fame-front想要访问容器fame-server，则设置base URL=fame-server(fame-server是服务器的容器的container_name)。
此设置后，打开浏览器，输入网址：http://xx.xxx.xxx.xx，可以成功…，但是随便点一个链接，就会看到浏览器提示无法访问地址http://fame-server/…
vendor . e 2 feb 665 ef 91 f 298 be 86 . js:2 get http://fame-server/API/article/1 net:ERR _ CONNECTION _ rejected
这是必然的结果。在容器中，http://fame-server/是服务器…，但是你的本地浏览器肯定不知道http://fame-server/是什么鬼…，所以浏览器报错不可访问。
什么？但是你刚才不是说Nuxt是服务器渲染的页面吗？为什么本地浏览器再次报告此错误？
原来，在通过浏览器链接直接访问时，Nuxt确实是从后端渲染页面，然后传输，但是在点击页面中的链接时，通过Vue-Router跳转，此时Vue-Router不在Nuxt的控制范围内，而是像Vue一样在浏览器中渲染。此时需要从浏览器获取数据进行渲染，浏览器会报错。
怎么解决？
一开始我一直尝试配置Docker容器的网络模式来解决这个问题，但是都没有解决。后来看了axios文档才注意到axios的代理功能。它的本质是解决跨域问题，因为只要在axios中设置了代理，在服务器上渲染时就会使用代理地址，访问浏览器时会使用baseUrl的地址。这个功能完美的解决了我的问题。
将以下代码添加到server-config.js文件中(在nuxt.config.js的环境变量中获取proxyHost和proxyPort)。
.
constlocalProxy={
主机：\'127.0.0.1\ '
端口：9090
}
constbaseProxy={
host:process . env . proxy host | | local proxy . host，
port:process . env . proxy port | | local proxy . port
}
exports.baseProxy=isProd？baseProxy:本地代理
.
然后在axios配置文件中添加代码。
//fame-front/插件/http.js
constAxios=axios.create({
代理：serverConfig.baseProxy
.
})
.
你可以完美地解决这个问题。
Dockerfile环境参数的统一设置
上面部分解决动态配置axios地址的问题，将baseUrl的设置放在Dockerfile中，现在将Dockerfile中的硬代码提取出来放入统一的配置文件中。
首先，创建环境文件。env在docker-compose.yml文件目录下(即项目和目录)并写入内容。
BASE_URL=http://xx.xxx.xxx.xxx
PROXY_HOST=fame-nginx
代理端口=80
这是docker-compose的env_file参数。您可以从文件中获取环境变量，该文件可以是单独的文件路径或列表。如果有一个。env文件在同一个目录下，默认情况下会被读取，或者你可以在docker-compose中自己设置路径。
环境变量BASE_URL的值已在中设置。env，可以直接在docker-compose.yml中使用，修改docker-compose.yml的fame-front部分：
名声在外：
.
环境：
基本网址：$ {基本网址}
代理主机：$ {代理主机}
代理端口：$ {代理端口}
.
这样在fame-front容器中就有了对应的BASE_URL、PROXY_HOST、PROXY_PORT环境变量，也可以成功获取并设置Nuxt。
但是对于fame-admin容器来说，情况稍微复杂一些。让我们看一下fame-admin容器的Dockerfile文件。
#构建阶段
来自节点：10.10.0-alpineasbuild-stage
#中间部分操作省略.
RUNnpmrunbuild
#生产阶段
from nginx:1 . 15 . 3-阿尔卑斯山生产阶段
收到。/fame-docker/fame-admin/nginx . conf/etc/nginx/conf . d/default . conf
COPY-from=build-stage/app/dist/usr/share/nginx/html
曝光80
CMD['nginx ''-g '' daemonoff']
这里使用了多级容器。如果直接通过docker-compose设置环境变量，只会在后期生效，但是npm run build是在第一阶段执行的，所以环境变量不能应用于Vue。为了在第一阶段应用环境变量，需要在构造时将变量从docker-compose转移到fame-admin-Dockerfile，然后在Dockerfile的第一阶段将环境变量应用到容器。修改docker-compose.yml的fame-admin部分，如下所示：
名气-管理：
.
构建：
上下文：/
dockerfile:/fame-docker/fame-admin/fame-admin-docker file
参数：
BASE_URL:${BASE_URL}#这里，环境变量作为ARG传递给Dockerfile。
.
然后在fame-admin-Dockerfile第一阶段添加步骤。
#构建阶段
来自节点：10.10.0-alpineasbuild-stage
ARGBASE_URL#必须声明这个ARG才能从docker-compose中获得它。
env vue _ APP _ API _ URLBASE _ URL
#以下省略.
这样，在构建的第一阶段就可以将环境变量传入镜像，这样Vue中的变量就可以生效了。
摘要
现在互联网上很多复杂的项目即使是用docker-compose部署的，也是依靠shell脚本来操作，比如复制文件设置环境，我觉得这样会降低docker-compose的意义。如果使用shell脚本，最好用shell而不是docker-compose来构建和启动映像。
所以我们虽然在Docker的过程中遇到了一些磕碰，但还是坚持只部署docker-compose，以后上线下线都很方便。也希望我的Docker思路能给其他项目一些参考。
相比之前恐怖的步骤，现在的名望博客只需要两行命令就可以上线下线，真的很方便。
docker-合成
docker-composedown
源地址https://github.com/zzzzbw/Fame
西部数码代理(chenqinet.cn)是工信部批准的正规老牌云服务商，拥有ISP、云牌照、IDC、CDN全业务资质。自成立以来，二十多年来一直专注于域名注册，虚拟主机，云服务器，企业邮箱，企业网站建立等互联网基础服务！
公司开发的云计算平台以便捷、高效、高性价比、意想不到的售后优势占领市场，跻身国内前三的接入服务商，为国内超过50万家网站提供高速稳定的托管服务！先后荣获中国高新技术企业、中国优秀云计算服务商、中国十大IDC企业、中国最受欢迎云服务商等称号！
目前西部数码代理高性能云服务器在售，最低仅售48元！
http://zhuji.chenqinet.cn/cloudhost/
国内的vps