前端小白也能学会的Nginx部署全攻略

2023-12-02 00:51:07

前言

作为一名合格的前端工程师，除了掌握前端开发技术外，还必须具备基本的服务器部署知识。nginx作为一款轻量级、高性能的web服务器，深受广大开发者的青睐。本文将手把手教你如何从0到1在nginx服务器上部署前端代码，让你轻松实现前端代码的发布和运维。

正文

安装配置Nginx
- 安装Nginx
  
  在你的服务器上安装nginx。具体安装方法因操作系统而异，但通常可以使用以下命令安装nginx：
```
yum install nginx
```
  或
```
apt-get install nginx
```
- 配置Nginx
  
  编辑nginx的配置文件，通常位于/etc/nginx/nginx.conf。在配置文件中，你需要指定nginx的监听端口、网站根目录、静态资源目录等。例如：
```
server {
    listen 80;
    server_name www.example.com;
    root /var/www/html;
    index index.html index.php;
}
```
部署静态资源
- 创建网站根目录
  
  在服务器上创建网站根目录，通常位于/var/www/html。这个目录将存放你的前端代码。
- 复制前端代码到网站根目录
  
  将你的前端代码复制到网站根目录。你可以使用FTP工具或命令行工具（如scp）进行复制。
- 配置nginx的网站配置
  
  在nginx的配置文件中，添加一个新的网站配置块，指定网站根目录和静态资源目录。例如：
```
server {
    listen 80;
    server_name www.example.com;
    root /var/www/html/example;
    index index.html index.php;
}
```
配置反向代理和负载均衡
- 配置反向代理
  
  如果你有多台服务器，可以使用nginx的反向代理功能将请求转发到不同的服务器上。这可以提高网站的可用性和性能。
  
  在nginx的配置文件中，添加一个新的反向代理配置块，指定后端服务器的地址和端口。例如：
```
upstream backend {
    server 192.168.1.10:80;
    server 192.168.1.11:80;
}

server {
    listen 80;
    server_name www.example.com;
    location / {
        proxy_pass http://backend;
    }
}
```
- 配置负载均衡
  
  如果你有多台服务器，可以使用nginx的负载均衡功能将请求均匀地分配到不同的服务器上。这可以提高网站的性能和可用性。
  
  在nginx的配置文件中，添加一个新的负载均衡配置块，指定后端服务器的地址和端口。例如：
```
upstream backend {
    server 192.168.1.10:80 weight=1;
    server 192.168.1.11:80 weight=2;
}

server {
    listen 80;
    server_name www.example.com;
    location / {
        proxy_pass http://backend;
    }
}
```
申请和安装SSL证书
- 申请SSL证书
  
  如果你想使用HTTPS协议访问你的网站，你需要申请一个SSL证书。你可以从Let's Encrypt等免费证书颁发机构申请SSL证书。
- 安装SSL证书
  
  将SSL证书安装到nginx服务器上。具体安装方法因操作系统而异，但通常需要将SSL证书文件复制到nginx的证书目录中。
- 配置nginx的SSL配置
  
  在nginx的配置文件中，添加一个新的SSL配置块，指定SSL证书文件和密钥文件。例如：
```
server {
    listen 443 ssl;
    server_name www.example.com;
    root /var/www/html/example;
    index index.html index.php;

    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;
}
```
测试部署结果
- 访问你的网站
  
  在浏览器中输入你的网站地址，看看是否能正常访问。
- 检查nginx的日志文件
  
  检查nginx的日志文件，确保没有错误消息。