Docker部署全栈项目：六、部署Nginx和React

前端项目不论是 vue 还是 react，编译之后都是 html + css +js 的模板。

因此这里使用 React Demo 来演示如何部署前端项目至，Nginx的代理中。

一、创建React项目

如果你使用的是其它前端语言，或者直接是纯JS写法，都是大同小异。

# 创建React项目
$ create-react-app web

# 进入前端项目
$ cd web

# 构建项目(或者使用 npm run build)
$ yarn build 

# 构建完成后，会出现 build/ 目录，存放所有的静态资源文件

将构建后的数据，放到 nginx/html 目录下。

如果是远程服务器，可以使用 scp、pscp 等命令发送文件。

二、启动Nginx

1. 编写 start.sh

#!/bin/bash

# 启动前停止容器
docker stop luokaiii-nginx
docker rm luokaiii-nginx

# 运行容器
docker run --name luokaiii-nginx \ # 指定容器名
        -p 80:80 \    # 暴露80端口至宿主机
        -v /${PWD}/conf:/etc/nginx/conf.d \    # 挂载额外的配置文件
        -v /${PWD}/html:/usr/www/luokaiii/cn/html \    # 挂载静态资源
        -d nginx:alpine     # 后台运行nginx

2. 编写 conf/nginx.conf

server {
        listen 80;

        root /usr/www/luokaiii/cn/html;

        location / {
                try_files $uri $uri/ /index.html;
        }
}

3. 运行脚本

# 运行脚本
$ ./start.sh

4. 访问端口

访问80端口

三、使用Nginx代理接口服务

既然我们的接口使用的是容器服务，那么我可以把 luokaiii-api 的外部端口关闭，改为 nginx 的请求转发。

修改 nginx.conf：

upstream apisupport {
        server api:8080;
}
server {
        listen 80;

        root /usr/www/luokaiii/cn/html;

        location / {
                try_files $uri $uri/ /index.html;
        }

        # 将 /api/ 请求转发至 `luokaiii-api` 服务
        location /api/ {
                proxy_pass http://apisupport/;
        }
}

请求测试：

请求结果

参考资料：

Docker Hub

项目地址

Github
Gitee