FullStack实践(1)之个人网站Nginx基础配置

FullStack实践之(1)个人网站Nginx基础配置

Author: Once Day Date: 2024年1月27日

人生在世，如同梦一场...

全系列文章请查看专栏：网页开发_Once_day的博客-CSDN博客

参考文档:

• 简易文件下载服务器-CSDN博客
• SSL 证书 Nginx 服务器 SSL 证书安装部署-证书安装-文档中心-腾讯云 (tencent.com)

文章目录

• • • FullStack实践之(1)个人网站Nginx基础配置
    • • [1. 基础知识](#1. 基础知识)
      • • [1.1 个人网站搭建流程](#1.1 个人网站搭建流程)
        • [1.2 生成自定义的ssl证书](#1.2 生成自定义的ssl证书)
      • [2. Nginx配置](#2. Nginx配置)
      • • [2.1 基础的UDP和TCP代理配置](#2.1 基础的UDP和TCP代理配置)
        • [2.2 重定http到https](#2.2 重定http到https)
        • [2.3 重定向URL路径](#2.3 重定向URL路径)
        • [2.4 alias指定本目录路径](#2.4 alias指定本目录路径)
        • [2.5 error_page错误码配置](#2.5 error_page错误码配置)
        • [2.6 404错误和50x错误](#2.6 404错误和50x错误)
      • 3.Nginx部署问题
      • • [3.1 重定向路径错误](#3.1 重定向路径错误)

1. 基础知识

1.1 个人网站搭建流程

搭建个人网站大致可以分为以下步骤：

1. 规划内容和功能：首先确定你的网站需要哪些内容和功能，比如博客、作品展示、个人简历等。

2. 选择技术栈：根据你的内容和功能需求，选择合适的技术栈。技术栈包括前端（HTML, CSS, JavaScript框架如React或Vue.js）和后端技术（如Node.js, Python的Django或Flask, Ruby on Rails等）。

3. 购买域名和主机：域名是你网站的地址（如example.com），而主机则是服务器的空间，用来存储网站文件。

4. 配置Linux服务器：如果你选择的是VPS（虚拟私人服务器），你需要配置服务器环境，安装必要的软件，如Web服务器、数据库等。

5. 设计和开发网站：设计网站的外观并开发所需的前端和后端功能。

6. 部署网站：将网站文件上传至服务器，配置Web服务器和数据库。

7. 测试网站：确保所有功能正常，网站在不同的设备和浏览器上看起来和运行都良好。

8. 维护和更新：网站上线后，定期进行内容更新和技术维护。

Linux服务器是指使用Linux操作系统的服务器。Linux是一种流行的开源操作系统，特别适合用作服务器，提供了稳定、安全的环境。常用的Linux发行版包括Ubuntu, CentOS, Debian等。

域名和IP地址：

• 域名 ：域名是Internet上网站的独特名称，如 google.com。它是IP地址的易记替代，通过DNS（域名系统）解析成IP地址，使用户可以通过浏览器访问网站。
• IP地址 ：IP地址是指Internet上每个设备的唯一地址，如 192.168.1.1。它用于网络中设备间的识别和通信。

Nginx是一种高性能的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。在个人网站中，Nginx常用于处理Web请求，如发送HTML文件或处理HTTPS请求。

后端通常指的是网站的服务器端软件部分，负责管理数据库、服务器配置、用户验证、逻辑处理等。常见的后端语言有PHP, Python, Ruby, Java, Node.js等，以及相应的框架。

前端是指用户直接与之交互的网站部分，包括网页设计、布局和一些基本交互。主要技术包括HTML（网页结构）、CSS（样式设计）和JavaScript（动态交互）。

这些知识点的介绍可以为你撰写个人网站相关内容提供一个基础框架。根据读者的技术背景，可以适当深入每个部分的具体细节。

1.2 生成自定义的ssl证书

参考文档:

• 制作ssl证书 知乎
• https://m.tongfu.net/home/35/blog/512607.html
• https://cloud.tencent.com/document/product/400/35244
• https://cloud.tencent.com/developer/ask/sof/47746
• https://www.cnblogs.com/ezgod/p/14271541.html
• https://blog.csdn.net/weixin_42736510/article/details/123736320
• SSL 证书 Nginx 服务器 SSL 证书安装部署-证书安装-文档中心-腾讯云 (tencent.com)

本地测试用的ssl证书可以进行自行制作，但是不受信任，浏览器会显示不安全。

创建 server.key 文件

openssl genrsa -des3 -out server.key 2048 # 输入密码123456789, 长度不能太短了

创建 server.csr 文件，有六项信息必须填写，其中"Common Name"就是证书的域名

openssl req -new -key server.key -out server.csr -config /usr/lib/ssl/openssl.cnf

获取openssl配置文件所在位置(openssl.cnf文件的位置):

openssl version -d
openssl req -new -key server.key -out server.csr -config /usr/lib/ssl/openssl.cnf

必填配置:

Country Name (2 letter code) [XX]:CN
State or Province Name (full name) []:Fujian
Locality Name (eg, city) [Default City]:FuZhou
Organization Name (eg, company) [Default Company Ltd]:Ruijie
Organizational Unit Name (eg, section) []:SPD
Common Name (eg, your name or your server's hostname) []:OnceDay.ssl.test

创建 ca.crt 和 ca.key 文件，有六项信息必须填写，其中"Common Name"就是证书的域名

openssl req -new -x509 -keyout ca.key -out ca.crt -config /usr/lib/ssl/openssl.cnf # 输入密码987654321

根据/usr/lib/ssl/openssl.cnf配置文件中CA相关内容，创建必备的文件:

mkdir -p ./demoCA/newcerts

如果没有文件 ./demoCA/index.txt 就创建一个

touch ./demoCA/index.txt

如果没有文件 ./demoCA/serial 就创建一个

echo "00" > ./demoCA/serial

创建 server.crt 文件

openssl ca -in server.csr -out server.crt -cert ca.crt -keyfile ca.key -config /usr/lib/ssl/openssl.cnf

最后会生成如下文件

ca.crt  ca.key  server.crt  server.csr  server.key

创建免密key文件，创建后使用server.key.unsecure就可以在重启web服务的时候不需要输入密码了

openssl rsa -in server.key -out server.key.unsecure

2. Nginx配置

基础的Nginx配置可以查看一下网站:

• 简易文件下载服务器-CSDN博客

2.1 基础的UDP和TCP代理配置

# TCP 代理
stream {
    server {
        listen 9090;
        proxy_pass 10.51.135.15:9090;
    }
    server {
        listen 2222;
        proxy_pass 10.52.25.134:22;
    }
}

# UDP 代理
# stream {
#    server {
#        listen 12345 udp;
#        proxy_pass 10.52.25.134:22;
#    }
#}

2.2 重定http到https

要配置Nginx以将HTTP流量重定向到HTTPS，您需要编辑Nginx的配置文件，通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/目录下。以下是一个简单的配置示例，展示了如何将HTTP流量重定向到HTTPS：

server {
    listen 80;
    server_name example.com www.example.com;

    # Redirect all HTTP requests to HTTPS with a 301 Moved Permanently response.
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com www.example.com;

    # SSL configuration
    ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/private.key;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 4000 sessions
    ssl_session_tickets off;

    # modern configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;

    # HSTS (ngx_http_headers_module is required)
    # add_header Strict-Transport-Security "max-age=63072000" always;

    # Further SSL configuration can go here

    # The rest of your server configuration
}

在这个配置中，第一个server块监听端口80（默认的HTTP端口），并为所有请求提供一个301永久重定向到相应的HTTPS URL。这是通过return 301 https://$server_name$request_uri;指令实现的。

第二个server块设置了端口443（默认的HTTPS端口），并包含了SSL配置。这里你需要指定你的SSL证书文件和私钥文件的路径。还可以调整SSL设置，例如启用特定的SSL协议和会话设置。

确保你的SSL证书和私钥文件的路径是正确的，并且对应于你的服务器和域名。一旦配置完成，你需要重启Nginx以使更改生效：

sudo nginx -t      # 测试配置文件是否有语法错误
sudo systemctl restart nginx  # 重启Nginx服务

请注意，使用301重定向对于搜索引擎优化（SEO）是很重要的，因为它告诉搜索引擎该页面已永久移动到新的地址。

此外，如果您已经在使用Let's Encrypt等服务，并且使用了Certbot工具，可以简单地运行certbot --nginx，并遵循提示来自动设置重定向。Certbot会自动调整Nginx配置以启用HTTPS并设置重定向。

2.3 重定向URL路径

在Nginx中重定向特定的URL路径，你需要在Nginx配置文件中使用 rewrite 指令。以下是一个基本的例子，它显示了如何将一个路径重定向到另一个路径：

server {
    listen 80;
    server_name example.com;

    location /oldpath/ {
        rewrite ^/oldpath/(.*)$ /newpath/$1 permanent;
    }

    # 其他配置...
}

在这个配置中，任何指向 http://example.com/oldpath/ 的请求都会被重定向到 http://example.com/newpath/。$1 是一个捕获组，代表了 oldpath/ 后面的任何内容，这样的重定向会保留原有的URL结尾。

permanent 关键字会导致Nginx发送一个HTTP状态码 301（永久移动），告诉浏览器或搜索引擎这个重定向是永久的。如果你想要一个临时重定向，可以使用 redirect 或者去掉 permanent，这将默认为临时重定向，状态码是302。

如果你想要重定向的是完整的URL，可以使用 return 指令，如下所示：

server {
    listen 80;
    server_name example.com;

    location /oldurl {
        return 301 https://example.com/newurl;
    }

    # 其他配置...
}

在这个例子中，当用户访问 http://example.com/oldurl 时，将会被301重定向到 https://example.com/newurl。

确保在做任何更改后，检查配置文件的语法是否正确，并重新加载Nginx使更改生效：

sudo nginx -t
sudo systemctl reload nginx

使用这些示例应该可以帮助你设置Nginx以重定向特定的URL路径。记住适当地调整上述配置，以匹配你的实际域名和所需的重定向行为。

2.4 alias指定本目录路径

在Nginx中，alias 指令用于定义一个替代的路径来处理特定位置块中的请求。它通常用于当文件不是位于location块指定的根路径下时，将请求映射到文件系统中的另一个路径。这和 root 指令有所不同，因为 root 指令会将指定的路径和location块中的URI拼接起来形成文件路径，而 alias 则是直接替换location的路径。

下面是 alias 指令的一个基本用法示例：

server {
    listen 80;
    server_name example.com;

    location /images/ {
        alias /path/to/actual/images/;
    }
}

在这个例子中，当有请求来到 http://example.com/images/somefile.jpg，Nginx将会在文件系统中查找 /path/to/actual/images/somefile.jpg 来提供响应。

请注意，alias 路径后面的斜杠（/）很重要。如果location块以斜杠（/）结尾，alias 指令中的路径也应该以斜杠结尾。这样可以确保替换是正确的。

让我们来看一个更具体的例子：

server {
    listen 80;
    server_name example.com;

    location /static/ {
        alias /var/www/example/static/;
    }
}

在此配置中，所有指向 http://example.com/static/ 的请求都会被映射到 /var/www/example/static/ 目录。例如，http://example.com/static/image.jpg 将会提供 /var/www/example/static/image.jpg 文件。

与 root 相比，alias 不会自动将location的URI部分添加到文件路径中。它是一个直接的路径替换，这意味着你可以将location块映射到文件系统中的完全不同的路径。

配置完毕后，不要忘记测试配置并重新加载Nginx服务：

sudo nginx -t
sudo systemctl reload nginx

这将确保你的配置没有语法错误，并且新的配置被应用。

2.5 error_page错误码配置

在Nginx中，error_page 指令用于定义服务器在遇到特定的错误状态码时应返回的页面。这允许你自定义错误页面，例如404 Not Found或500 Internal Server Error，提高用户体验。

下面是error_page指令的基础语法：

error_page code ... uri;

这里的code是HTTP状态码，如404、500等，uri是发生错误时，用来替代默认错误页面的URI。

你可以为单个状态码指定一个错误页面，也可以为多个状态码指定同一个错误页面。下面是一些例子：

server {
    listen 80;
    server_name example.com;
    
    error_page 404 /custom_404.html;
    location = /custom_404.html {
        root /path/to/error/pages;
        internal;
    }

    # 其他配置...
}

在这个例子中，当404错误发生时，Nginx会提供/path/to/error/pages/custom_404.html作为错误页面。

server {
    listen 80;
    server_name example.com;
    
    error_page 404 500 502 503 504 /custom_error.html;
    location = /custom_error.html {
        root /path/to/error/pages;
        internal;
    }

    # 其他配置...
}

在这个配置中，多个错误状态码（404、500、502、503和504）都被指定使用同一个自定义错误页面/custom_error.html。

你还可以将错误页面重定向到另一个URL：

server {
    listen 80;
    server_name example.com;
    
    error_page 403 http://example.com/forbidden.html;
    
    # 其他配置...
}

在此例中，403错误会导致Nginx重定向到指定的URL。

server {
    listen 80;
    server_name example.com;
    
    error_page 404 /404.html;
    location = /404.html {
        root /path/to/error/pages;
        internal;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /path/to/error/pages;
        internal;
    }

    # 其他配置...
}

上面的配置为常见的HTTP错误提供了自定义页面。internal 指令表示这些页面只能由内部Nginx重定向访问，不能直接通过浏览器访问。

每次修改了Nginx配置之后，都要检查配置是否正确，然后重新加载配置：

sudo nginx -t
sudo systemctl reload nginx

这样Nginx就会应用新的错误页面配置。

2.6 404错误和50x错误

HTTP错误状态码是服务器向客户端（通常是浏览器）报告请求状态的方式。它们分为几个不同的类别，其中404错误和50x错误分别属于客户端错误（4xx）和服务器错误（5xx）类别。下面是404错误和50x错误的区别：

404 Not Found（客户端错误）

• 状态码： 404
• 含义： 请求的资源无法在服务器上找到，但可能将来会变得可用。例如，如果用户尝试访问服务器上不存在的页面或资源，就会出现404错误。
• 原因： 通常是因为请求的URL或路径中的错误，文件或资源被删除、移动或重命名，或者用户输入的URL不正确。
• 谁的责任： 通常是客户端（用户或客户端开发者）的责任，因为他们可能请求了错误的URL或资源。
• 解决方法： 确保URL或路径正确，资源存在于服务器上，或者更新客户端以请求正确的资源。

50x Internal Server Error（服务器错误）

• 状态码： 500, 501, 502, 503, 504, 505 等
• 含义： 这些错误指示服务器在处理请求时遇到了问题。它们是服务器错误响应的一部分。
• 原因： 可能是服务器配置错误、服务器内部错误、资源超载、后端服务无响应、网关问题等。
• 谁的责任： 主要是服务器端的责任。需要服务器管理员或后端开发者介入处理。
• 解决方法： 服务器管理员需要查看服务器日志，确定错误的具体原因，并进行修复。可能涉及修复代码、更新服务器配置、增加资源或重启服务。

具体的50x错误包括但不限于：

• 500 Internal Server Error: 服务器遇到了一个预期之外的情况，导致它无法完成对请求的处理。
• 501 Not Implemented: 服务器不支持请求的功能，无法完成请求。
• 502 Bad Gateway: 作为网关或代理工作的服务器，从上游服务器收到无效响应。
• 503 Service Unavailable: 由于临时的服务器维护或过载，服务器当前无法处理请求。这是一个临时状态。
• 504 Gateway Timeout: 作为网关或代理工作的服务器，没有及时从上游服务器收到请求。
• 505 HTTP Version Not Supported: 服务器不支持请求中使用的HTTP协议版本。

总结来说，404错误通常表示客户端尝试访问服务器上不存在的资源，而50x错误表示服务器在处理有效请求时遇到问题。处理404错误通常涉及确保请求的路径和资源是正确的，而解决50x错误则通常需要服务器管理员的干预和排查服务器端的问题。

3.Nginx部署问题

3.1 重定向路径错误

在 Nginx 配置中，root 指令用来设置服务器上的文件系统路径，该路径用作请求的顶级目录。这意味着，当 Nginx 收到对某个文件的请求时，它会在这个 root 路径下查找对应的文件。

在你提供的配置片段中：

root /var/www;

# Add index.php to the list if you are using PHP
index index.html main.html;

# 主访问目录在html下, 重定向一下路径, 默认为
location / {
        alias /html/;
}

# 文档目录
location /doc {
        alias /doc;
}

• root /var/www;：这意味着所有的请求都会默认指向 /var/www 目录。

• index index.html main.html;：这告诉 Nginx 当请求是对一个目录的时候，应该寻找 index.html 或 main.html 作为默认页面。

• location /：这是一个处理根 URL（即 /）的 location 块。在这个块中，alias /html/; 应该是一个错误。alias 指令通常用于替换匹配到的 location 部分。但在这种情况下，由于没有提供正确的替换路径，它可能不会按预期工作。正确的使用方法是提供完整的文件系统路径，如 alias /var/www/html/;。否则，它可能会导致请求转发到错误的路径。

• location /doc：这个 location 块试图处理任何以 /doc 开头的 URL。然而，alias /doc; 同样有问题。alias 后应该跟一个完整的文件系统路径，例如 alias /var/www/doc/;。如果不这样做，Nginx 将会试图寻找 /doc 目录，而不是 /var/www/doc。

总结一下，上述配置有一些问题，应该调整为：

root /var/www;

# Add index.php to the list if you are using PHP
index index.html main.html;

# 主访问目录在/var/www/html下, 重定向一下路径, 默认为
location / {
        root /var/www/html;
}

# 文档目录在/var/www/doc下
location /doc {
        alias /var/www/doc/;
}

在这个修改后的配置中：

• location /：现在会为所有根 URL 请求提供 /var/www/html 目录下的内容。
• location /doc：对于以 /doc 开头的请求，它们将被映射到 /var/www/doc/ 目录。

请注意，alias 和 root 在使用上有区别。当使用 root 指令时，请求的 URI 会直接追加到 root 指定的路径后面。而 alias 用于将一个特定的 location 映射到一个完全不同的路径，且在替换时会去除匹配的 location 部分。