Logo

菜单

发布于 2026-01-06 5 阅读
0

如何在 DigitalOcean 上部署 Nuxt 全静态网站

如何在 DigitalOcean 上部署 Nuxt 全静态网站

在这篇文章中，我想告诉大家我是如何在 DigitalOcean 中配置一个 droplet，以便能够发布一个性能良好的 Nuxt 全静态网站。

开始之前

对于那些还不了解DigitalOcean 的人来说，它为开发者提供云服务，帮助部署和扩展在多台计算机上同时运行的应用程序。

你会发现我在文章中多次提到“droplet”这个词。在 DigitalOcean 中， droplet是基于 Linux 的灵活虚拟机 (VM)，运行在虚拟化硬件之上。因此，你创建的每个 droplet 都是一台可供使用的新服务器。

我们提供多种服务器托管方案，但我们将使用标准服务器托管方案，它能为我们的托管需求提供更大的自由度和灵活性。不过，我建议您先了解一下其他服务器托管方案，看看哪种最适合您的项目。

如果您还没有帐户，可以在这里注册：https://cloud.digitalocean.com/registrations/new！

步骤 1 - 创建您的液滴

既然我们知道了什么是液滴，那就让我们来创造自己的液滴吧🎉

点击右上角菜单栏中的“创建”>“Droplets” 。

  • 选择一张图片

在这种情况下，由于我们要部署我们最喜欢的框架 NuxtJS，因此我们需要 NodeJS 镜像。前往Marketplace，在搜索框中输入NodeJS，然后选择可用的最新版本。

在您的 DigitalOcean droplet 中选择一张图片

  • 选择方案

您需要考虑项目的可扩展性以及所需的容量。

就我们而言，为了解决 IS ! MY BUG 的问题，我们决定尝试使用标准 Droplet（每月 10 美元，可能就足够了）。

在 DigitalOcean 中为您的 Droplet 选择一个方案

  • 选择数据中心区域

在本部分，最好选择您希望网站表现最佳的地区，也就是您的目标受众所在的地区。

为您的 Droplet 选择一个数据中心区域

  • 验证

此选项将定义您如何连接到您的服务器。

出于安全考虑，我们建议使用 SSH 密钥。

DigitalOcean Droplet 中的身份验证

创建新的 SSH 密钥时，您需要按照模态框内的教程进行操作，然后添加在文本区域中生成的公钥 ( id_rsa.pub )。

在 DigitalOcean Droplet 中使用 SSH 密钥进行身份验证

完成所有选项后，给它命名并按下创建按钮。

命名并添加您的水滴

我们的 Droplet 已经准备就绪啦！！💜

步骤 2 - 添加您自己的域名

如果您已经购买了域名，我们可以将其添加到 DigitalOcean。否则，您需要先购买一个域名。

在顶部菜单栏中选择“创建”>“域/DNS”，即可打开“网络”页面，并选中“域”选项卡。

然后，在“输入域名”输入框中输入您的域名，然后点击“添加域名”按钮。

在 DigitalOcean 中添加域名

添加域名后，点击其名称即可查看和修改其 DNS 记录。

默认情况下您会看到 3 条 NS 类型记录。要将此域名添加到您的服务器，您还需要 2 条 A 类型记录：

添加与您的服务器实例相关的域名

  • 一个以 @ 为主机名的地址（相当于您的 domain.io），指向您的服务器（通过 IP 地址）。
  • 另一个以 www 作为主机名（将创建一个子域名www.domain.io）的域名，再次指向您的 droplet。

现在一切就绪，我们的服务器可以开始运行了。您可以使用以下命令检查域名是否正常工作，您应该会看到服务器的 IP 地址：ping domain.io

如果您在 DNS 管理方面遇到任何问题，我建议您查看“如何创建、编辑和删除 DNS 记录”。

步骤 3 - 通过 SSH 连接到您的服务器。

要通过 SSH 连接到您的 Droplet，您需要打开一个终端。具体步骤取决于您使用的操作系统，但通常情况下：

  • Linux：搜索终端或按CTRL+ALT+T。
  • macOS：搜索终端。
  • Windows 上的 Bash：搜索 Bash。如果你的 Windows 系统上没有 Bash，你可以安装Git，这样就会包含Git Bash，可以直接使用。

现在终端已经打开，你需要通过以下命令连接：

ssh root@DROPLET_IP_ADDRESS
Enter fullscreen mode Exit fullscreen mode

创建完服务器后，会生成一个 IP 地址，这就是 @ 符号后面需要使用的地址。

如果您有多个 SSH 密钥，则可能需要使用-i标志指定私钥的路径：

ssh -i /path/key username@DROPLET_IP_ADDRESS
Enter fullscreen mode Exit fullscreen mode

如果一切顺利，我们已经按照指南建议创建了密码短语，现在是时候将其添加进去了：

Enter passphrase for key '/c/Users/USER/.ssh/key':
Enter fullscreen mode Exit fullscreen mode

现在我们已经连接到我们的服务器了🙌，如果一切顺利，您将看到“root@DROPLET_NAME” 。否则，您可以参考DigitalOcean 团队提供的更详细的指南。

步骤 4 - 配置 NGINX 以运行我们的 NuxtJS 项目

好消息，我们的服务器上已经安装了NGINX，我们只需要配置服务器，让它在网站生成后运行我们的静态网站。让我们看看效果如何！

  • 创建域文件夹

在/var/www/目录下创建一个与域名同名的文件夹：

  cd /var/www/
  mkdir domain.io
Enter fullscreen mode Exit fullscreen mode

在域名文件夹内，我们还需要创建一个名为 html 的文件夹（该文件夹将存放我们的代码）：

  cd /var/www/domain.io
  mkdir html
Enter fullscreen mode Exit fullscreen mode
  • 创建域 NGINX 配置

要开始为我们的域名配置 NGINX，让我们将默认站点复制到一个以我们的域名命名的文件中：

  cd /etc/nginx/sites-available/
  cp default domain.io
  sudo nano domain.io
Enter fullscreen mode Exit fullscreen mode

打开复制的文件后，你会看到类似这样的内容：

  server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name hellonode;

    location ^~ /assets/ { 
      gzip_static on;
      expires 12h;
      add_header Cache-Control public;
    }

    location / {
      ...
      proxy_pass http://localhost:3000;
    }
  }
Enter fullscreen mode Exit fullscreen mode

我们需要修改、添加和删除以下内容：

  • 首先，将root /var/www/html;更改为root /var/www/domain.io/html/dist;并将server_name hellonode;更改为server_name domain.io www.domain.io ;。

  • 然后，删除“location ^~ /assets/ { }”和“location /”内的内容。

  • 最后，在下方添加 server_name：

  error_page 404 /200.html;
Enter fullscreen mode Exit fullscreen mode

现在，您将拥有：

  server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/domain.io/html/dist;
    index index.html index.htm index.nginx-debian.html;

    server_name domain.io www.domain.io;

    error_page 404 /200.html;

    location / {
    }
  }
Enter fullscreen mode Exit fullscreen mode

此文件也需要位于 sites-enabled 目录中，并且默认文件将被删除，为此，您需要运行以下命令：

  // Create a symbolic link to have the same content in both
  sudo ln -sf /etc/nginx/sites-available/domain.io /etc/nginx/sites-enabled/domain.io
  rm /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default
Enter fullscreen mode Exit fullscreen mode

最后，要查看已完成的更改，我们需要重启 NGINX，运行以下命令：

  sudo nginx -t // Test configuration
  sudo nginx -s reload
Enter fullscreen mode Exit fullscreen mode

由于我们目前还没有任何项目，所以会看到 404 错误，但我们离目标很近了。下一步，让我们配置项目吧！

步骤 5 - 使用 Git 部署自动化

为了使用 git 命令将我们的代码上传到 droplet 并实现自动化过程，我们可以创建一个 githook（或者您可以使用Github Actions）。

在这种情况下，我将向您展示如何通过配置 Githook 来上传您的项目：

  • 创建一个存储库

在用于存放我们静态网站文件的文件夹中，我们需要初始化一个Git仓库：

  cd /var/www/domain.io/html
  git init
Enter fullscreen mode Exit fullscreen mode
  • 创建一个 repobar 文件夹

现在，返回domain.io文件夹并创建 repobar 文件夹，

  cd ..
  mkdir repobare
Enter fullscreen mode Exit fullscreen mode

前往 repobare 并创建一个裸仓库：

  cd repobare
  git init --bare
Enter fullscreen mode Exit fullscreen mode

我们需要创建一个Githook，它可以拦截我们的提交并将文件推送到我们的 domain.io/html 文件夹。

  sudo nano hooks/post-receive
Enter fullscreen mode Exit fullscreen mode

将以下内容添加到post-receive githooks中：

  • 第一条命令会将从我们的存储库推送的内容添加到 html 文件夹中。

  • 最后几个命令会进入该文件夹，安装依赖项，并生成包含静态网站文件的 dist 文件夹。

  #!/bin/bash
  git --work-tree=/var/www/domain.io/html --git-dir=/var/www/domain.io/repobare checkout -f
  cd /var/www/domain.io/html
  npm install
  npm run generate
Enter fullscreen mode Exit fullscreen mode

然后保存接收后的文件，并授予其执行权限：

  sudo chmod +x hooks/post-receive
Enter fullscreen mode Exit fullscreen mode
  • 在本地仓库中创建一个新的源

为了保持我们起源的完整性，我们将创建一个新的起源，并赋予它我们想要的名称，用选定的名称替换原有的起源。

请转到本地仓库并运行以下命令：

  git remote add <deploy_origin> root@<DROPLET_IP_ADDRESS>:/var/www/domain.io/repobare
  git add .
  git commit -m "First commit"
  git push <deploy_origin> master
Enter fullscreen mode Exit fullscreen mode

运行git push 命令时，它会要求你输入 SSH 密码，填写后按 Enter 键。

现在，所有文件都在你的“domain.io/html”文件夹里了，开始构建吧👏 在你最喜欢的浏览器中查看结果🎉

附录 - 提高性能

1. SSL证书

第一步是获取 SSL 证书。为此，我们将使用 Let's Encrypt，正如DigitalOcean 在这篇文章中推荐的那样。为此，我们需要在我们的服务器上安装Certbot软件。

使用“apt”安装Certbot及其Nginx插件：

sudo apt install certbot python3-certbot-nginx
Enter fullscreen mode Exit fullscreen mode

Certbot 现在可以使用了，我们已经为其配置好了 Nginx。

所以，我们只需要运行以下命令即可为这两个域名获取相同的证书。

sudo certbot --nginx -d www.domain.io -d domain.io
Enter fullscreen mode Exit fullscreen mode

如果您是第一次使用“certbot”，请输入与您的域名关联的电子邮件地址（例如info@domain.io），并同意服务条款。

如果一切正常，“certbot”会要求选择HTTPS设置的配置（我选择了2：重定向）。

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2
Enter fullscreen mode Exit fullscreen mode

现在，证书已下载、安装并加载，您可以使用“https://”检查您的网站。

它包含续订流程，如果您想测试它，请转到“验证 Certbot 自动续订”。

2. 缓存策略

让我们在之前创建的domain.io的 Nginx sites-available 文件夹中配置 Cache-Control 和 Expires 标头。

sudo nano /etc/nginx/sites-available/domain.io
Enter fullscreen mode Exit fullscreen mode

新增 2 个章节：

  • 在服务器阻塞之前，缓存每种文件类型的持续时间。
  • 服务器块内部的缓存标头设置。
# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    ...

    expires $expires;

    root /var/www/domain.io/html/dist;
...
Enter fullscreen mode Exit fullscreen mode

要启用新配置，请重启 Nginx。

sudo nginx -s reload
Enter fullscreen mode Exit fullscreen mode

运行下面的下一个命令，以确保新配置生效，并看到“Expires: Thu, 01 Jan 1970 00:00:01 GMT”和“Cache-Control: no-cache”。

curl -I https://domain.io/index.html
Enter fullscreen mode Exit fullscreen mode

如果您想了解更多信息，请访问“如何实现浏览器缓存”。

3. 接受编码

要更改服务器的gzip配置，请编辑 nginx.config 文件：

sudo nano /etc/nginx/nginx.conf
Enter fullscreen mode Exit fullscreen mode

找到gzip设置部分并进行修改：

  • 取消所有注释行的注释以启用其他设置。
  • 将 gzip_min_length 设置为 256，并将 gzip_types 设置为您想要编码的格式。
...
##
# `gzip` Settings
#
#
gzip on;

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
...
Enter fullscreen mode Exit fullscreen mode

搞定了！要启用新配置，请重新加载 Nginx。

sudo nginx -s reload
Enter fullscreen mode Exit fullscreen mode

然后运行以下命令，以确保新配置生效：

curl -H "Accept-Encoding: gzip" -I https://domain.io/index.html
Enter fullscreen mode Exit fullscreen mode

如果您想了解更多信息，请转到“如何将 gzip 模块添加到 Nginx”。

结果

将此配置添加到我们的项目IS!MYBUG后，结果简直令人难以置信😍 我们太震惊了！！

配置 DigitalOcean Droplet 后的性能结果

希望您能好好阅读本文，并消除您在决定使用 DigitalOcean 搭建 Nuxt 全静态网站时可能存在的任何疑虑。

感谢您的光临，一如既往，非常欢迎您的任何反馈！💜🎉

文章来源：https://dev.to/dawntraoz/how-to-deploy-a-nuxt-full-static-site-in-digitalocean-4l73
庆祝互联网诞生50周年：简史回顾
Instagram 登录页面📸🖼️