1:react-demo
-
克隆你的
react-demo
项目到服务器上(默认使用Github管理我们的项目) -
如果需要,请安装项目环境,比如:
node.js
,yarn
等 -
进入项目目录,执行
npm run build
,开始构建项目 -
构建成功之后,会生成一个
dist
文件夹(取决于你的项目配置),这个文件夹里的静态文件,就是我们的项目的访问文件了, -
配置
Nginx
,Linux
服务器是进入到:/etc/nginx/sites-enabled
,然后以管理员身份,新建一个你的react项目的配置文件,比如:react-demo.conf
,然后,编辑文件:
server {
listen 8080;
# server_name your.domain.com;
root /home/root/react-demo/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
error_page 500 502 503 504 /500.html;
client_max_body_size 20M;
keepalive_timeout 10;
}
-
执行
sudo service nginx restart
重启Nginx
服务, -
访问项目,http://IP:8080/
注意事项:
1、配置域名的话,需要80端口,成功后,只要访问域名即可访问的项目
2、如果你使用了React-Router
的browserHistory
模式,请在Nginx配置中加入如下配置:
location / {
try_files $uri $uri/ /index.html;
}
原理,因为我们的项目只有一个根入口,当输入类似/home
的url时,找不到这个页面,这是,nginx会尝试加载index.html,加载index.html之后,react-router就能起作用并匹配我们输入的/home
路由,从而显示正确的home页面,,如果browserHistory
模式的项目没有配置上述内容,会出现404的情况。
nginx 上部署 react 项目_vVvlife的博客-CSDN博客_nginx react
----------------------------------------
项目二:
1. 在本地打包好本地项目,也就是dist
2. 上传自己的dist包
3. 安装nginx,进入/usr/local/nginx/conf/nginx.conf 我们来配置nginx配置来做代理
4. 这里我们不把自己的dist包上传到nginx上,而是把前端看成单独的应用,前后端以及负载均衡做到完全分离。我们可以把dist打成镜像然后启动。dockerfile是
#引用镜像
FROM node:12.16.3
#执行命令,创建文件夹
RUN mkdir -p /usr/www
WORKDIR /usr/www
COPY . /usr/www
RUN npm run build
#配置环境变量
ENV HOST 0.0.0.0
ENV PORT 8080
#定义程序默认端口
EXPOSE 8080
#运行程序命令
CMD ["node","./server/index.js"]
如果是静态HTML,则需要一个server。
可以
FROM tatsushid/tinycore-node # Copy application code.
COPY . /dist/ # Install dependencies.
RUN npm install -g http-server # 工作目录
WORKDIR /dist/ # 工作目录 执行的命令
CMD ["http-server"]