nginx初体验

目的

安装并部署项目+配置证书

环境

Ubuntu操作系统

操作

1. 更新软件包列表

sudo apt update

2. 安装 Nginx

sudo apt install -y nginx

3. 启动并设置开机自启

sudo systemctl start nginx
sudo systemctl enable nginx

4. 检查运行状态

systemctl status nginx

如果看到 active (running) 说明 Nginx 已经在运行。

5. 防火墙（如果启用了 UFW）

允许 HTTP 和 HTTPS 流量：

sudo ufw allow 'Nginx Full'

如果只开启http,则Nginx HTTP ,查看防火墙 sudo ufw status、重启服务器 sudo ufw reload

6. 测试安装

在浏览器访问服务器 IP：

http://你的服务器IP

能看到 Nginx Welcome Page 就表示安装成功。

Nginx 默认安装在：

• 配置：/etc/nginx/

• 网站目录：/var/www/html/

• 日志：/var/log/nginx/

7.部署项目+配置证书

证书获取查看免费获取域名证书并自动续签 - Qodes，项目自己打包好

部署文件位置的特点

• sites-available/ = 软件的“安装目录”

• sites-enabled/ = “快捷方式”或者“启动项”

• nginx.conf = 总的“控制台”

所以我们将配置文件写到sites-available 文件下，并链接到sites-enabled 即可

1. 新建 Nginx 配置文件

sudo nano /etc/nginx/sites-available/qodes.top.conf

写入以下内容（根据你的证书文件名替换 fullchain.cer 和 privkey.key）：

server {
    listen 80;
    server_name qodes.top;

    # HTTP 自动跳转 HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name qodes.top;

    root /app/vue/dist;
    index index.html;

    ssl_certificate     /etc/ssl/qodes.top/fullchain.cer;
    ssl_certificate_key /etc/ssl/qodes.top/qodes.top.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # Vue history 模式支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：静态文件缓存优化
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|mp4|webm)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }
}

2. 启用配置

建立软链接：

sudo ln -s /etc/nginx/sites-available/qodes.top.conf /etc/nginx/sites-enabled/

3. 检查配置是否正确

sudo nginx -t

如果提示 syntax is ok 和 test is successful 就没问题。

4. 重新加载 Nginx

sudo systemctl reload nginx

5. 验证访问

• 打开 https://qodes.top 或 https://你的子域名.qodes.top

• 应该能看到你的 Vue 项目页面

⚡ 注意：

1. 确保 DNS 已经解析 qodes.top 到你服务器 IP。

2. /app/vue/dist 必须有 index.html 文件。

3. 如果 证书不是 fullchain.cer/qodes.top.pem，需要确认 Let’s Encrypt / 自签发 / 购买的证书文件名。

后续管理

增加站点：在sites-available下添加配置文件即可：配置域名 + 其他location 即可

创建配置：sudo nano /etc/nginx/sites-available/域名.conf

配置

server {
    listen 80;
    server_name 自定义域名;

    # HTTP 自动跳转 HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name 自定义域名;

    root 页面存放路径(/xxx/web);
    index index.html;

    #统一存放证书位置
    ssl_certificate     /etc/ssl/qodes.top/fullchain.cer;
    ssl_certificate_key /etc/ssl/qodes.top/qodes.top.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # Vue history 模式支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：静态文件缓存优化
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|mp4|webm)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }
}

链接：sudo ln -s /etc/nginx/sites-available/域名.conf /etc/nginx/sites-enabled/

• 修改内容后不需要重新修改链接

重启：sudo systemctl reload nginx

这样一个新站点就搞好了

泛域名解析问题

首先：主域名和泛域名不同，即泛域名不包括主页面，其次是解析机制：先精准，再调配，都不是就第一个

• 精确匹配 server_name

  • 访问 blog.qodes.top → Nginx 会寻找 server_name blog.qodes.top; 的 server 块。

• 最长通配符匹配

  • 如果没有精确匹配，Nginx 会找通配符（如 *.qodes.top）。

• 默认 server

  • 如果以上都没匹配到，就会使用 第一个被定义的 server 块作为默认 server。

默认有一个通配配置文件，专门用于处理不匹配的请求，但是只针对80端口请求生效，就会导致随便输入什么域名都会跳到第一个server；而我们要的效果是，如果请求我们没配置的域名，则应该跳到404！

设置也非常简单，打开 sudo nano /etc/nginx/sites-available/default ，配置443端口 + 证书

至此，一个服务器的网站部署就完成了，并且可以高效、自由的拓宽服务