前端项目部署到云服务器

前端项目准备

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

云服务器设置

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

安装 nginx 服务器

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

yum install -y nginx    // 命令安装 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 服务