部署React项目到云服务器
- 前言(下载相关软件)
- 开始部署
- 服务器以及域名购买
- 实例远程连接 或 XShell 7 远程连接服务器
- XShell 7 连接云服务器操作
- 使用FileZilla将 打包后的 build(可能你们那里打包是dist)文件塞到服务器文件夹
- 感谢看到这里！点个关注再走啊！ 彦祖！
前言(下载相关软件)
1. XShell7免费版安装
(1). 下载地址: https://www.xshell.com/zh/xshell-download/
(2). 打开后看到右侧 -> 点击免费授权页面
(3). 填写姓名, 邮件, 选择只需XShell
(4). 打开邮箱, 点击邮箱中的下载链接
(5). 安装2. FileZilla(文件传输) 下载方式(window)
(1). https://www.filezilla.cn/download
(2). 客户端 -> 立即下载
(3). FILEZILLA 64位 安装版: 支持 64 位版本的 Windows 8.1 和 10。
开始部署
服务器以及域名购买
1. 一台属于自己的云服务器 阿里云，华为云... （我服务器是CentOS 7.6，当然你们也可以选择其他环境）
2. 一个域名（注意域名备案需要云服务器续费时长最少三个月，至少京东云是这样的_(:з」∠)_）
实例远程连接 或 XShell 7 远程连接服务器
远程连接服务器（你可以使用实例中的远程连接或者XShell7的远程连接），这一步的操作是为安装Nginx做准备
建议不要嫌麻烦, XShell7 很好用
实例连接：
XShell 7 连接：
XShell 7 连接云服务器操作
打开Xshell 7并连接到服务器后，下载Nginx，epel-release
1. 连接云服务器: ssh@服务器ip
2. 安装epel仓库: yum install epel-release -y
3. 安装Nginx: yum install nginx -y
4. nginx指令:(1) 开启防火墙: systemctl start nginx(2) 启动Nginx: service nginx start(3) 重启Nginx: nginx -s reload(4) 关闭Nginx: service nginx stop
当你完成了以上操作的时候, 在浏览器中输入ip地址, 你应该看到这样的界面
恭喜你, 成功了! 不过还差最后一步.
使用FileZilla将 打包后的 build(可能你们那里打包是dist)文件塞到服务器文件夹
打开fileZilla软件, 连接远程服务器
打开站点管理器 -> 新建站点
(1). 节点选择 SFTP - SSH File Transfer Protocol
(2). 登录类型 询问密码
(3). 连接成功
连接后输入服务器密码之后, 会显示连接成功, 如果不成功的话那可就奇怪了…如果不成功,具体办法你们自己问chatgpt吧_(:з」∠)_
会提示连接成功的
看右侧远程站点
首先 现在远程站点右侧路径框里把root删掉，只输入一个/ 按下回车进入根目录
例如: 在根目录新建一个www文件夹,再www文件夹再新建一个mofish文件夹(www和mofish是自定义名称随便起什么名字都行，只要你记得住)
在桌面创建一个mofish.conf文件内容如下
server {#端口号listen 80;#域名或者ipserver_name 域名或ip;#文件的路径root /www/mofish/build;#配置默认访问的页面index index.html;#配置代理location /api {proxy_pass http://127.0.0.1:3033;}location /apilist {rewrite /apilist/(.*) /$1 break;proxy_pass http://127.0.0.1:3033;}
注意
将conf文件塞到 /etc/nginx/conf.d 文件夹下，不用管那个default
多么激动人心的时刻啊
完毕后 服务器后台或者XShell7 输入 nginx -s reload 重启Nginx
重启完毕浏览器输入 服务器ip即可访问你的网页了！！
感谢看到这里！点个关注再走啊！ 彦祖！
私密马赛，点个关注呗~
