docker+react+nginx部署
一、准备工作
1、先确保项目可以正常运行。
2、如果拉代码到Linux下进行打包,注意node版本,我就是版本不同,yarn build一直不成功。
3、找一个nginx的配置文件nginx.conf,放在项目根目录。
server { listen 80; listen [::]:80; server_name localhost; gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; gzip_vary on; gzip_disable "MSIE [1-6]\."; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } # 后台服务器地址,你自己的后端服务ip地址 location /api/ { proxy_pass http://0.0.0.0:8080; } }
4、打包项目 yarn build
二、编写Dockerfile文件,生成镜像
FROM nginx COPY ./build /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80
docker build -t test:v1.0.0 . # 注意最后的那个“.”,说明是当前目录下
三、运行镜像及调试
docker run -it --name test -p 8080:8080 test:v1.0.0
一开始不建议-d直接后台运行,这样报错的话不利于调试,确保没有问题后再进行后台
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!