服务器上配置nginx在之前nginx搭建静态网站中，写了怎样去搭建一个网站，但是当时这个网站的搭建是在本地搭建的，现在

在之前nginx搭建静态网站中，写了怎样去搭建一个网站，但是当时这个网站的搭建是在本地搭建的，现在来看看如何在服务器上搭建，做到可以做到代码的部署联动等功能，完成之后我们只要在自己的部署平台上进行代码的打包和拷贝就可以了。

一、准备服务器

我们这边是两个服务器，

二、下载安装nginx

在nginx官网中找到要安装的版本，注意偶数版本为稳定版本，比如1.20.1，找到对应的url之后，在服务器B上使用yum或者wget下载解压，我这里解压之后的文件夹为nginx.1.20.1。

解压之后，进入nginx.1.20.1目录下，执行：

此时，nginx最最最基础的功能就可以了。

但是，现在还没有访问能力，因为我们没有指定文件的访问路径。

三、指定访问路径

上面基础的nginx配置好之后，就可以配置访问路径了。

在服务器A上，使用cat ~/.ssh/id_rsa.pub获取到服务器A的公钥，将该公钥添加到服务器B的～/.ssh/authorized_keys文件中，保存退出。这一步是在服务器B上配置服务器B的免密登录，方便我们将服务器A上项目的dist文件拷贝到服务器B上。
将项目打包之后的代码拷贝在服务器B的某一个目录下，这里我设置在根目录的/data目录下，整个路径就是/data/dist，如果不知道可以使用pwd查看当前目录。
将nginx.conf的location / 中的root配置为我们dist目录的地址，我这里是/data/dist，即：

...... root /data/dist; ......
在nginx目录下使用./sbin/nginx -s reload重新加载nginx配置文件。

现在我们可以通过ip访问了，比如服务器B的ip为1.1.1.1，那么我们访问1.1.1.1，就能看到内容了。

但是我们不想通过ip，想通过域名访问，怎么办呢？

可以通过hosts配置！

在本地打开~/etc/hosts文件，并添加1.1.1.1 test.x.com，保存之后，就可以在浏览器中使用test.com访问了。

注意：这里我第一次设置的时候，映射关系是对的，但是就是访问不到nginx，可能是不小心添加了什么隐藏的字符之类的东西，删除重新添加就可以了。

四、特殊问题

我们项目是一个react单页面项目，所以使用test.com访问的时候，是可以访问到的，但是如果使用react路由，url变成test.com/home，nginx就会走到404页面，这个问题有两种解决办法：

在nginx.conf中增加404的error_page，比如：

  error_page   404 /index.html;
  location = /index.html {
     root /data/dist;
  }

这样当404时，会去找/data/dist/index.html文件，但是这样配置存在一个问题，就是nginx先会对test.com/home返回404，然后返回/data/dist/index.html，也就是说在network中可以看到test.com/home是404。

将nginx.conf的location / 指令块改成：

   location / {
      root   /data/dist;
      try_files $uri /index.html;
   }

这样当访问test.com/home时，首先会去尝试在dist文件夹下寻找home文件，如果没有则会寻找dist/index.html文件。

这样test.com/home的请求状态是200，并且会返回index.html文件。

想要请求的地址为1.1.1.1/static/index.html。

location /static {
    proxy_pass http://1.1.1.1;
}

location /static/ {
    proxy_pass http://1.1.1.1;
}

location /static {
    proxy_pass http://1.1.1.1/;
}

location /static/ {
    proxy_pass http://1.1.1.1/;
}