react项目部署到linux服务器

最新推荐文章于 2024-04-27 23:04:34 发布

雷飞虎

最新推荐文章于 2024-04-27 23:04:34 发布

阅读量622

点赞数

文章标签： react.js nginx 前端 linux ssl

本文链接：https://blog.csdn.net/weixin_42165779/article/details/129169500

版权

该文章详细记录了React项目从打包到服务器部署的过程，包括使用yarn打包，将build文件上传至服务器的指定目录，配置Nginx代理以处理HTTP和HTTPS请求，设置SSL证书确保安全连接，并重启nginx服务以使改动生效。

摘要由CSDN通过智能技术生成

react部署笔记

1.1打包项目

#安装yarn
npm install -g yarn
#打包项目
yarn build

1.2 将打包好的build 推到服务器

# cd到前端web目录
cd /usr/local/web/lwh
#build文件夹放到这路径下

1.3配置Nginx代理配置

修改nginx.conf文件

#文件nginx.conf
# nginx的配置文件位置
cd /usr/local/nginx/conf
# 编辑nginx文件
vim nginx.conf
#添加如下内容,xxx为你的项目名字
include confile/xxx.conf;

创建xxx.conf 对应项目nginx配置文件

cd confile
#创建xxx项目nginx配置文件
mkdir xxx.conf
# 编辑xx.conf配置文件
vim xxx.conf

xxx.conf文件内容

server{
    listen 80;
    server_name lwhtimepill.leiweihao.ltd;
    rewrite ^(.*)$ https://${server_name}$1 permanent;
}
server{
    listen 443;
    server_name lwhtimepill.leiweihao.ltd;
    ssl     on;
    ssl_certificate /usr/local/nginx/conf/cert/lwhtimepill.leiweihao.ltd_nginx/lwhtimepill.leiweihao.ltd_bundle.pem;
    ssl_certificate_key /usr/local/nginx/conf/cert/lwhtimepill.leiweihao.ltd_nginx/lwhtimepill.leiweihao.ltd.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    location / {
        proxy_pass http://127.0.0.1:21010; 
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host                    $http_host;
    }
}
server{
    listen 21010; 
    location /{
        root /usr/local/web/lwh/timepill/build;
        try_files $uri /index.html;
    }
    error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
    location ~/api/(.*){
        proxy_pass http://localhost:21011;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        proxy_set_header           Host $host;
        proxy_set_header           X-Real-IP $remote_addr;
        proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
        rewrite  ^/api/(.*)  /$1 break;
    }
}

1.4域名申请ssl证书，下载到服务器

>>> cd /usr/local/nginx/conf/cert/lwhtimepill.leiweihao.ltd_nginx
>>> ls
lwhtimepill.leiweihao.ltd_bundle.crt  lwhtimepill.leiweihao.ltd_bundle.pem  lwhtimepill.leiweihao.ltd.csr  lwhtimepill.leiweihao.ltd.key