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