在ubuntu服务器上部署react项目

前言

我用react搭建的个人UI库已经竣工，此时迫切需要把它扔到服务器上实现在线访问。

第一步，构建项目

因为我通过create-react-app搭建的项目，项目自带构建工具，所以只需进入项目目录，npm run build，然后会生成一个build文件夹，这个文件夹就是我们所需要的东西。

第二步，服务器上传项目

把第一步生成的build文件夹转移到你的服务器，可以用filezilla工具，也可以本地git上传，然后服务器git clone，文件夹可以随便放在任意地方，只要知晓其路径即可。

第三部，配置nginx

nginx的默认路径是/etc/nginx，它的下面有两个文件夹,sites-available和sites-enabled,第一个文件夹存放的就是server配置，第二个文件夹是激活并使用的server配置（就是sites-available下server配置的快捷方式）。
我们就为这个项目新增一个配置，这个配置名就叫个myreact

sudo nano /etc/nginx/sites-available/myreact

输入以下内容，

server {
  listen 8080;
  root /home/ubuntu/ymui/build;     # build文件夹的绝对路径
  index index.html index.htm;
  client_max_body_size 20M;
  keepalive_timeout 10;
}

如果你的项目路由是browserHistory模式，就必须再在server内添加，主要是为了告诉服务器，不管url是怎样，默认加载index.html

  location / {
    try_files $uri $uri/ /index.html;
  }

完成后，按Ctrl+X，然后Y,回车回车保存文件
下面把这个配置激活使用

sudo ln -s /etc/nginx/sites-available/myreact /etc/nginx/sites-enabled

我们首先测试一下 配置文件有没有语法错误

sudo nginx -t

如果没有任何指示，重新启动nginx

sudo systemctl restart nginx

然后在本地输入

http://服务器IP地址:8080

即可访问

配置域名

如果想给这个项目配置域名，那就更改一下我们的myreact配置

sudo nano /etc/nginx/sites-available/myreact

修改端口为80，因为域名需要80端口

listen 80;

增加服务器名称

server_name ymui.ymhd.xyz;

保存后重启nginx，这下就可以通过域名访问了

结束

最后，欢迎访问我个人开发的UI库，英目UI