Introduction
在上一部分已经搭建了flask环境，这一部分继续搭建react和mariadb部分。在下一篇使用docker-compose将多个部分完全整合。
搭建react
部署react的思路是先搭建一个nginx服务器，然后将react的页面部署到nginx存放页面的文件夹里面，以此通过nginx访问react。
先搭建nginx
参考：https://www.cnblogs.com/wwzyy/p/8337965.html
运行nginx
- 拉取镜像：
docker pull nginx - 运行：
docker run -d -p 8084:80 nginx - 浏览器访问：
localhost:8084
映射页面文件
- 先将html页面写好，放在路径dir下
- 运行：
docker run -d -p 8084:80 -v dir:/usr/share/nginx/html - 相当于把dir中的页面文件映射到了nginx容器内的html中，用类似的方法就可以把react页面映射到nginx容器中。
react发布到nginx
参考：
https://zhuanlan.zhihu.com/p/37360191
https://segmentfault.com/a/1190000010415158
我们是用Facebook官方的零配置命令行工具 create-react-app 创建的项目,create-react-app 内置了打包的npm 命令
在命令行里切换到项目目录,执行 npm run build 命令,代码会被编译到build目录。将整个应用打包发布，自动使用webpack进行压缩与优化。
把打包好的build文件夹映射到容器内的html文件夹
- create-react-app参考：
https://www.imooc.com/article/17382
https://www.runoob.com/react/react-install.html
https://github.com/facebook/create-react-app
https://blog.csdn.net/github_squad/article/details/57452333
默认的nginx配置有个问题，在非首页的路由页面刷新就会报404错误。
参考：
http://www.nphard.me/2016/03/07/nginx-for-react/
https://blog.csdn.net/y2010081134/article/details/87691263
react-router介绍
我们使用react-router作为路由管理，在开发端的express服务器下运行和测试表现均正常，部署到线上的nginx服务器后，还需要对该应用在nginx的配置里作相应调整，否则浏览器将不能正常刷新，表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应，如果此时刷新浏览器，服务器收到浏览器发来的uri就去寻找资源，这个uri在服务器上是没有对应资源，结果服务器因找不到资源就发送403错误标志给浏览器。所以，我们要做的调整是：浏览器在使用这个react应用期间，无论uri更改与否，服务器都发回index.html这个页面就行。
创建nginx.conf文件
# gzip设置
gzip on;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_min_length 1000;
gzip_proxied any;
gzip_disable "msie6";
#gzip_http_version 1.0;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
server {
listen 80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
# 其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
try_files $uri /index.html;
}
location ~* html {
rewrite .* /index.html break;
root /home/hard/Project/game/web-client/build/html/;
}
#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;
}
}
mariadb
总共4行命令搭建并验证，详情请见Docker_3_搭建WordPress+mariadb
# 启动mariadb
docker run -dit --name mariadb_wordpress -e MYSQL_ROOT_PASSWORD=123456 -p 33060:3306 mariadb
# 进容器测试
docker exec -it mariadb_wordpress bash
mysql -u root -p
# 输入密码：
123456
# 成功登陆
备份和恢复
#备份Docker MySQL
docker exec CONTAINER /usr/bin/mysqldump -u username --password=xxx DATABASE > backup.sql
#从sql文件恢复到Docker MySQL
cat backup.sql | docker exec -i CONTAINER /usr/bin/mysql -u username --password=xxx DATABASE
编写yml文件
version : '3'
services:
nginx:
# 镜像:版本
image: nginx:latest
# 映射容器80端口到本地80端口
ports:
- "80:80"
# 数据卷 映射本地文件到容器
volumes:
# 映射nginx.conf文件到容器的/etc/nginx/conf.d目录并覆盖default.conf文件
# - ./nginx.conf:/etc/nginx/conf.d/default.conf
# 映射build文件夹到容器的/usr/share/nginx/html文件夹
- ./build:/usr/share/nginx/html
# 覆盖容器启动后默认执行的命令。
command: /bin/bash -c "nginx -g 'daemon off;'"
links:
- db:mariadb
db:
image: mariadb:latest
ports:
- "33066:3306"
environment:
- MYSQL_ROOT_PASSWORD=123456
- MYSQL_DATABASE=project_echo
网友评论