脚把脚 0到1部署React项目至阿里云服务器

网上看了好多好多关于从购买阿里云服务器到最后部署成功React项目的博客，看的眼花缭乱然鹅…对博主而言好像并没有什么X用，这篇博客的流程对于博主本人呢是很有用滴~希望可以帮到点开来看到的你鸭！

购买阿里云服务器

购买阿里云服务器的话，学生党是可以白嫖一个月的

1. 首先显示进入阿里云的官网，点击这里进入阿里云官网。然后就注册啊啊啊啊啥的
2. 登录成功后学生党是可以白嫖一个月的，需要找到云翼计划，不过博主没有找到，所以大家直接点击这里就可以直接进入云翼计划的网站了.
3. 找到这个，选择免费试用就好了！记住选择CentOs的系统，因为博主后面的操作都是基于这个系统的。配置的话，也没什么注意的网上好多博客（🐕头）而且都是一整套操作很简单的
   
4. 之后进入阿里云官网，登陆后点击控制台
   
   点击云服务器ESC，你可能是别的，反正就是点这里进入服务器管理就🆗
   （看到物联网平台想到自己小学期还没弄完，抹泪ing）
   
   选择实例，即可进入服务器啦！
   

安装Nginx服务器软件

1. 由于我们选择的是Centos的服务器，所以需要使用终端进行连接。博主是进行前端开发，所以可以使用vscode里面的终端进行与服务器的远程连接，但是博主推荐使用PoweShell

• 使用vscode打开powershell
  • 按住 Ctrl+Shift+P 选择默认选怎Shell，选择PowerShell就可以
    
• 使用终端打开PowerShell
  • 进入文件夹，按住 Shift 右击鼠标，选择在此处打开PowerSehll窗口就可以了

2. 打开之后输入命令 ssh root@ip 其中root是你的用户名，win系统默认是administor，而Linux系统默认是root，ip是你的服务器公网地址
   
   然后输入密码，密码是自己设置的。选择密码/钥匙，选择修改远程连接(VNC)密码即可
3. 使用ssh连接后输入密码，连接成功应该出现下图
   
4. 然后就需要安装Nginx了，输入以下命令即可

// 1. 下载ngin依赖
wget  http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 2. 安装依赖
rpm -ivh nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 3. 安装nginx
yum install nginx  
// 4. 启动并开机自启动
systemctl start nginx.service  
systemctl enable nginx.service

如果是ubuntu系统，请点击这里

5. 最后当你在浏览器输入你的服务器公网IP时候可以看到Nginx的欢迎界面就可以了：
   

打包React项目

1. 进行完上述操作，服务器基本配置就完成了，然后进行React项目的打包。进入项目目录后执行命令

yarn build

注意：如果你的项目使用了antd后，这样打包部署完成后，访问项目是无法看到Antd的所有样式和动画，因此需要进行以下步骤在进行打包
1. 安装 babel-plugin-import

yarn add  babel-plugin-import

2. 在package.json中配置，这种方法成功的前提是webpack里query下配置babelrc：true， 这样就会使用babelrc文件中的配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

2. 项目打包好之后应该把 build 目录传至服务器中。博主使用的是PowerShell的 scp，具体使用方法点击这里
   注意：很多时候PowerSehll是不能识别目录途径，博主使用了git-bash！！！！亲测可用！！！速度还很快！！！用起来兄弟萌！！！

修改Nginx的默认配置

1. 首先通过这个命令找到nginx配置文件地方：

nginx -t

2. 我的返回结果如下：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

3. 进入 nginx.conf 这个目录有两个比较关键的文件夹

nginx.conf，这是一个主配置文件
conf.d，这是一个文件夹，里面包含着服务器的独立的配置文件

4. 因此打开conf.d，在里面创建服务器配置文件builder.conf(前缀自己定)：

server {
    listen      80;
    server_name 47.98.xxx.xxx;(自己的服务器IP)

    location / {
        root    /usr/project/webbuilder/build;
        index   index.html index.htm;
    }
}

4. 配置好之后，重载一下nginx配置

nginx -s reload
systemctl stop nginx
systemctl start nginx

配置安全组

1. 进入服务器管理平台，进入安全组额
   
2. 选择配置规则
   
3. 新增如下规则。因为在配置文件中，我们监听的是80端口号
   

访问项目

打开浏览器输入公网地址就可以访问到项目啦！！