Nginx网站部署

网站的部署

将我们的前端项目挂载到服务器的 /data 下，在 /data 目录下 clone 仓库的代码，执行打包编译。

配置虚拟主机

虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器。

端口绑定

修改 Nginx 的配置文件：/usr/local/nginx/conf/nginx.conf

server {
  listen 80;
  server_name localhost;
  location / {
    root /data/project/html;
    # index index.html;
    try_files $uri $uri/ /index.html;
  }
}

重启 nginx，浏览器输入项目上前端页面的 IP 就可以看到上传至服务器上的前端项目

域名绑定

做好域名指向后，修改 nginx 配置文件，修改 server_name 为你的域名。

server {
  listen 80;
  server_name domain_name.com;
  location / {
    root /data/project/html;
    # index index.html;
    try_files $uri $uri/ /index.html;
  }
}

重启 nginx，浏览器输入项目上前端页面的域名（domain_name.com）就可以看到上传至服务器上的前端项目

注 try_files $uri $uri/ /index.html：

• 当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。
• try_files 回到硬盘里尝试找这个文件。如果存在名为 /$root/example (其中 $root 是项目代码安装目录) 的文件，就直接把这个文件的内容发送给用户。
• 目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 / ，也就是看有没有名为 /$root/example/ 的目录。
• 如果还找不到，就会到 try_files 的最后一个选项 /index.html，发起一个内部的“子请求”，也就相当于 nginx 发起一个 http 请求到 http://localhost/index.html

同一服务器上部署了多个不同的web应用

通过不同的端口或者不同的地址来代理不同的 web 应用

server {
  listen 80;
  server_name domain_name.com;
  location / {
    # 前端项目打包之后的文件目录
    root /data/project/html;
    # index index.html;
    try_files $uri $uri/ /index.html;
  }
}
server {
  listen 80;
  server_name  another_domain_name.com;
  location / {
    root /data/another_project/html;
    # index index.html;
    try_files $uri $uri/ /index.html;
  }
}
server {
  listen 81;
  server_name  another_domain_name.com;
  location / {
    root /data/another_project/html;
    # index index.html;
    try_files $uri $uri/ /index.html;
  }
}