互联网上的本地主机

您的本地主机已连接到互联网，并且启用了 SSL，没有任何限制。

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

您的本地主机已连接到互联网，并且启用了 SSL，没有任何限制。

介绍

有很多服务可以让你将本地主机暴露在互联网上。我们需要这样做来测试第三方 API 或展示当前的开发服务器。例如，最常用的服务有：

1. ngrok
2. 本地隧道
3. 页面风筝

所以为什么要重新发明轮子呢？因为你必须追溯根源，理解其中的简单复杂性。这没什么大不了的。

先决条件

那么我们到底需要什么呢？

1. 服务器（我将使用 5 美元的DO服务器）
2. 域
3. 好奇心和耐心

你可能会问，这种设置有什么好处？

• 完全自定义域名，域名数量不限。
• 使用次数不限
• 比其他服务的付费计划更划算

我们开始吧？

设置过程只需 4 个步骤。

1. 在服务器上使用 nginx 设置监听端口，并将其与子域名关联。
2. 在 DNS 中添加子域名（我们将使用超棒的 Digital Ocean DNS）
3. 添加由我们最喜欢的Let's Encrypt提供的 SSL 证书。
4. 使用强大的 SSH 命令转发流量。

步骤 1 - 使用 nginx 配置服务器以处理子域名的流量

nginx请先在服务器上安装。如果您使用的是Ubuntu，
则需要在指定sites-available文件夹中添加一个nginx配置文件/etc/nginx。nginx配置文件如下所示。

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    server_name 42.igauravsehrawat.com;

    location / {
        proxy_pass http://localhost:4242;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;

        # Enables WS support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

server {
    server_name www.42.igauravsehrawat.com;

    location / {
        proxy_pass http://localhost:4242;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;

        # Enables WS support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

我们来看一下配置。

1. 其中有server_name一条指令指定要向哪个域发送请求，listen还有一条指令指定要在该域上监听哪个端口。
2. 这里的指令location很重要，我们只是通过localhost端口代理请求4242。这个端口很重要，因为我们会将本地主机流量定向到它。然后还需要设置请求头。
3. 指令的其余部分是通过升级连接来启用此配置上的 WebSocket 支持。仅此而已。

注意：您需要server_name根据所需的子域名进行更改，而不是42.igauravsehrawat.com。

步骤 2 - 在 DNS 中配置子域名

我们将使用Digital Ocean DNS 服务，添加一个我们选择的子域名，即 42.igauravsehrawat.com，就像步骤 1 中所做的那样。

要添加子域名，我们将创建 3 条记录（A 记录、AAAA 记录、CNAME 记录）。A
记录和 AAAA 记录将重定向到我们的 Digital Ocean 服务器，如下所示。

CNAME 只是我们 A/AAAA 记录的别名。这三个记录将显示如下。

以上就是全部内容，您应该能够通过互联网访问您的子域名，并显示您的502 Bad Gateway页面，这是预期的，因为没有任何东西被转发到端口4242。

步骤 3 - 启用 SSL

启用 SSL 简直易如反掌，比想象中还要简单。请按照此处certbot的安装步骤操作。

然后运行 ​​nginx 的魔法命令
sudo certbot --nginx

你会看到类似下面的内容。

运行两次，一次用于子域名，一次用于 CNAME（别名）。

现在当你访问你的子域名www.igauravsehrawat.com时，应该会看到这个页面。这是预期行为，因为服务器上的 localhost 端口没有任何程序运行。

4242

汪！我们离欢庆之舞只有一步之遥了。

第四步 - SSH魔法

只需一条命令，即可统御一切

ssh -N -R localhost:4242:localhost:3000 root@42.igauravsehrawat.com

-N 表示“不执行远程命令。这仅适用于端口转发。”
-R 表示“将连接到远程（服务器）主机上指定 TCP 端口或 Unix 套接字的连接转发到本地。”

第一个 localhost 是服务器的地址，第二个 localhost 是本地机器的地址，然后是服务器的地址。如果您设置了 SSH 密钥（推荐），连接将非常便捷，无需密码，无需任何其他操作。

就是这样。

如约而至，跳起了欢快的舞蹈。

GIF

等等，等等，我们还没测试呢。

测试

为了进行测试，我将创建一个 React应用create-react-app，并npm start在 3000 端口（默认端口）上运行它。
然后运行神奇的 SSH 命令。
ssh -N -R localhost:4242:localhost:3000 root@42.igauravsehrawat.com

观看实际演示

结论

只需一台服务器，搭建自己的网络环境并不难。您可以拥有一个完全自定义、启用 SSL 的子域名，没有任何限制。