前端项目部署到云服务器

jiezi

5 年前

我们需要在 package.json 里面添加一行
"homepage": ".",
如果不加上这个的话
之后打包的时候, 打开 index.html 会报错
项目完成以后，运行 npm run build 进行打包
例如打包之后的文件夹为 build

首先进入服务器，然后安装 nginx
推荐 yum 源安装

安装 `nginx` 服务器

ssh root@yourIp    // 首先打开命令行，连上你的服务器

yum install -y nginx    // 命令安装 nginx 服务器

安装完成后，进入 nginx 配置文件目录一般是 /etc/nginx/ 下
在该目录下新建一个 vhost 文件夹作为你自己的配置文件目录
然后进入 vhost 新建一个配置文件，比如 example.conf
输入如下配置

server {
   listen      5000;    // 端口号可以自己设置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;    // 注意这是里放你上面 build 文件夹里的内容
   location / {try_files $uri @fallback;}
   location @fallback {rewrite .* /index.html break;}
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {root   html;}
}

注意: /usr/local/reactProjects/yourReactProject 路径只是举个例子，你可以放在其他目录下
另外，上传文件到云服务器可以用 xftp 或者其他的软件
再输入 vi nginx.conf 添加下图划红线部分代码，把你的配置 include 进来

到此简易版的 nginx 就配置好了
这里暂不考虑反向代理等复杂配置

输入 systemctl start nginx 开启 nginx 服务

浏览器上输入 yourIpAdress:5000/ 便可以访问你的页面了

另外 systemctl status nginx 可以查看 nginx 的运行状态

以及 systemctl stop nginx 可以关闭 nginx 服务

前端项目部署到云服务器

前端项目准备

云服务器设置

安装 `nginx` 服务器

配置 nginx

启动