Lycolog

今回はwell-known portsが利用出来ない環境でも自宅サーバーを公開する手法を紹介します。

自宅サーバーにhttps://service.example.com/のようにポート指定なしのサブドメインでアクセスできるようにするのがゴールです。

構成

自宅サーバーの手前にCDNを挟み、CDNを経由して接続させるようにします。要するに手前にリバプロを生やしておくわけです。

前提

• Google Domainsを利用している
• ルートドメインを保有している
• AWSのアカウントがある
  • ない場合はこっから作りましょう

前準備

DNSレコードに次のドメインを作っておく

自宅サーバーを公開可能な状態にする

叩き台程度ならserveを使うのが手っ取り早いですが、Node.jsでサーバー立てるのもありだと思います。今回は叩きなのでHTTPにしていますが本番運用するときはHTTPSにしましょう。

以下サンプル

const http = require('http');

const port = 12345;

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello world!');
    console.log(req.headers.host, req.socket.remoteAddress);
});

server.listen(port, () => {
    console.log(`Running at http://localhost:${port}`);
});

手順

1. CloudFrontを開く
2. 「ディストリビューションを作成」
3. 「オリジンドメイン」にcdn.example.comを設定
4. 「プロトコル」を選ぶ
5. cdn.example.comの「ポート」を設定する
6. 設定までスクロール
7. 「代替ドメイン名 (CNAME) - オプション」で「項目を追加」しservice.example.comを入力
8. 「カスタムSSL証明書 - オプション」で「証明書をリクエスト」
9. 「パブリック証明書をリクエスト」
10. 「完全修飾ドメイン名」にservice.example.comを入力し「リクエスト」
11. 「証明書を表示」
12. DNSレコードに「CNAME名」で「CNAME値」を追加
13. 「保留中の検証」が終わるのを待つ
14. 「カスタムSSL証明書 - オプション」で作成した「ACM証明書」を選択
15. 「ディストリビューションを作成」
16. service.example.comのDNSレコードをCNAMEにし、データを「ディストリビューションドメイン名」に変更
17. https://service.example.com/にアクセスできればOK

参考資料

• 代替ドメイン名 (CNAME) を追加することによるカスタム URL の使用 (docs.aws.amazon.com)

トラブルシュート

ディストリビューションを削除したい

1. ディストリビューションの一覧で消したいのにチェック入れて無効化
2. しばらく待つ
3. 消したいのにチェック入れて削除

参考：ディストリビューションを削除する (docs.aws.amazon.com)

後書き

副次的効果ですがCDN挟んでキャッシュされてるお陰で連続アクセスしてもサーバーまでリクエスト来ないので感動しました。

CloudFrontには他にも様々な機能があるみたいなので活用できれば便利そうです。

ローカル環境用の開発ドメインをhttps化する時に使えるやつ
例えばローカル環境に複数のサービスがいて、それぞれをhttps://*.example.com/のようなドメインで管理したい時に使える

確認環境

同じことをすればLinuxとかでも応用できると思う

手順

1. mkcertの導入とワイルドカード証明書の作成

   choco install mkcert
   # mkcertを認証局として登録
   mkcert -install
   # 証明書を作成するドメインを列挙
   mkcert example.test *.example.test
   mv _wildcard.example.com+1.* C:/nginx/conf/.ssl/
   

2. nginxの設定に証明書を記載

   server {
       server_name  dev.example.com;
       listen 443 ssl;
   
       ssl_certificate     ssl/_wildcard.example.com+1.pem;
       ssl_certificate_key ssl/_wildcard.example.com+1-key.pem;
       ...
   }
   

各サービスの振る舞いが少し気になったので適当にサッと軽く見たメモです
ある程度モダンそうなところを適当に選んだので特に観点とかはないです

確認環境

• Google Chrome 91.0.4472.124（Official Build）
• Cookie offはファーストパーティCookieをブロックして確認

超簡単なまとめ

Qiita

Cookie off

ログインしようとするとエラーになります

JS off

ページの一部が欠損しますが、特にエラーは出ない模様

Twitter

Cookie off

ログインしようとするとログインページでループします

JS off

エラーが出ます

GitHub

Cookie off

めちゃくちゃシンプルなエラーが出ます

JS off

ページの一部が欠損し、場所によってはエラーになる模様

Google

検索ページとログインページで確認

Cookie off

ログインしようとするとエラーになります

JS off

検索はできましたが、ログインしようとするとエラーになります

Youtube

Cookie off

Googleと同じなのでパス

JS off

読込中の状態で止まります

mercari

Cookie off

未確認

JS off

読込中の状態で止まります

DMM

Cookie off

Twitter同様にログインページでループしました

JS off

ページ上部に通知が生えてきます
ついでにページ表示が崩れたり、一部のページ遷移が機能しなくなりました

DLSite

Cookie off

ログインしようとするとログアウト処理に飛びました

カートにアイテムを入れても入りません

JS off

ページの一部が欠損するので成人向けサイトでも超健全に！

カートからアイテムを消すと謎のエラーが出ますが、カートからは一応消えます

skeb

Cookie off

白紙ページになります
Consoleに次のエラーが出るので想定外ということでしょう

DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

JS off

白紙ページになりました

Tayori

Cookie off

エラーになります

JS off

• トップページの一部が欠損
• トップページからヘッダーのリンクを叩くと表示されるコンテンツが白紙に
• ユーザーのFAQページは検索が動作不能

SoundCloud

Cookie off

ログインできずにループします

JS off

エラーになります

Windows標準のリモートデスクトップを使うケース

確認環境

やり方

1. HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\ParametersにDWORDでDisableTaskOffloadを切り、1を設定してOSを再起動
2. 適当な音声を再生し、停止したときに遅延がなければOK

備考

• DiscordやSlackがホストかクライアントでマイクをlistenしてると遅延が起きることがあるので切っておくと安定することがある
• 数時間起動してると徐々にずれてくるので、その場合は手間になるが定期的にRDPを繋ぎ直すと良い
• ZOOMなどの通話をする手前で繋ぎ直すと有効だが、通話が長時間に渡ると微妙になる

文字コードはiso-2022-jp

SMTPの設定例

export EMAIL_SENDER_TRANSPORT=SMTP
export EMAIL_SENDER_TRANSPORT_host=smtp.example.com
export EMAIL_SENDER_TRANSPORT_port=1025

サンプルコード

use strict;
use Email::MIME;
use Email::MIME::Creator;
use Email::Sender::Simple qw(sendmail);

my $subject = Encode::encode('MIME-Header-ISO_2022_JP', 'さぶじぇくと');
my $mail    = Email::MIME->create(
    'header' => [
        'From'    => Encode::encode('MIME-Header-ISO_2022_JP', 'foo@example.com'),
        'To'      => Encode::encode('MIME-Header-ISO_2022_JP', 'to@example.com'),
        'Subject' => $subject,
    ],
    'attributes' => {
        'content_type' => 'text/plain',
        'charset'      => 'ISO-2022-JP',
        'encoding'     => '7bit',
    },
    'body' => Encode::encode('iso-2022-jp', 'ほんぶん！'),
);