Docker+Nginx发布react 本⽂介绍Centos8发布React流程
安装Docker以及Nginx流程本⽂不做介绍，可以查看：
1.React项⽬打包:
以VSCode开发⼯具为例，新建终端，并运⾏`npm run build`命令
等待执⾏完毕后会在项⽬根⽬录出现dist⽂件夹，上传dist⽂件夹到linux服务器。
在⾃⼰的电脑上新建⼀个Dockerfile⽂件，没有后缀名。添加如下代码配置:
# 设置基础镜像
FROM nginx:alpine
将dist⽂件中的内容复制到 /usr/share/nginx/html/ 这个⽬录下⾯
COPY .  /usr/share/nginx/html/
把Dockerfile⽂件上传到刚刚的dist⽂件夹中
执⾏命令切换到dist⽬录:
cd /app/dist
创建容器:
docker build -t 容器名 .    //.⼀点要有
创建容器镜像:
docker run --name=reactdocker -p 8036:80 -d reactdocker    //--name ：指定容器名称。 --p ：指定容器端⼝。--d ：指定容器后台运⾏。
之后在输⼊`curl localhost:8036`指令查看镜像是否运⾏成功:
出现如上前端代码块代表成功!
2.配置Nginx:
执⾏指令`cd /usr/local`切换到local⽂件夹
继续执⾏`vi /usr/local/nginx/f`打开nginx配置⽂件
在⽂件中到server节点，之后进⾏如下配置:
server {
listen 9111; #监听9111端⼝
server_name localhost;
client_max_body_size 10m; #请求最⼤字节限制
proxy_connect_timeout 300;#代理连接超时时间
proxy_read_timeout 300;#代理接收超时时间
location / {
root /app/dist;#前端⽂件夹路径
index index.html,index.htm;#初始页⾯
proxy_pass localhost:8036;#未携带api代表前端访问，9111重定向到8036，8036端⼝指前端发布到服务器的端⼝try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass localhost:8003;#携带api代表访问后端，9111重定向到8003，8003端⼝指后端发布到服务器的端⼝}
#error_page 404 /404.html;
nginx部署前端项目redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
此配置包含前后端!
需要注意的是这⾥!
root后⾯跟的是前端dist⽂件夹的路径，注意修改！
配置好之后执⾏
/usr/local/nginx/sbin/nginx -s reload
指令重启nginx
配置好之后执⾏指令,
curl localhost:9111
如出现和
curl localhost:8036
同样的代码块，即为成功。之后开启服务器外⽹端⼝9111，就可以通过外⽹访问了！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。