月額 1 ドル未満で静的な個人用ウェブサイトを作成する方法

この投稿の目的は、月額 1 ドル未満で独自の静的な個人 Web サイトを作成する方法を紹介することです。おそらく、「今読んだばかりだったかな？」と思っているかもしれません。やったね！もちろん、その目標を達成するには注意点がありますが、Web サイトの開始当初は、独自の静的 Web サイトをホストするのにかかる費用は実際には月額 0.01 ドルだけです。この投稿の対象読者は、JavaScript の経験があり、Web 開発について一般的な理解がある人です。そのような背景がなくても、心配する必要はありません。誰でも理解できるように、この投稿内のアイデアとコンセプトを説明するために最善を尽くします。

始める前に、最初のサイトを作成するために使用するさまざまな用語を理解するために、いくつかの定義を理解しましょう。サイトを Google Cloud に追加するプロセスを進める際には、次の定義を自由に参照してください。

• Web サイトのドメイン: yelp.com など、インターネット上の Web サイトを識別するために使用されるアドレス
• ドメイン登録プロバイダー: カスタム ドメインを購入できるドメインのプロバイダー
• 静的 Web サイト: 固定数の HTML、CSS、JavaScript ファイルの組み合わせで作成された Web サイト
• Next.js: サーバー側のレンダリングと静的サイト生成をサポートする React.js フレームワーク
• ストレージ オブジェクト: ストレージに使用されるエンティティ。写真やビデオ、その他の種類のファイルを考えてください。
• Google Cloud: さまざまなサービスを提供するクラウド コンピューティング プラットフォーム、私たちはストレージに関心があります
• Google Cloud Storage: Google Cloud のオブジェクト ストレージ サービス。ウェブサイトの静的ファイルの保存に使用します。
• バケット (Google Cloud Storage): ウェブサイトのファイルを保持するコンテナ

この記事は、読者が Web サイト開発とプログラミングに関する基礎知識を持っていることを前提としています。各読者は次のようなものを持っていると仮定します。

• Web サイト開発の基本的な理解 - Web 開発入門 (freecodecamp.org)
• NPMの経験
• React.jsとNext.jsの初心者の知識
• CLIによる快適さ
• コンピューターにインストールされている IDE - たとえば、 VSCodeを使用します。

私は、目標を少しずつ作業の塊に分割することで、よりよく考える傾向があります。 Web サイトを作成するときに、このようにタスクを組み立ててみましょう。

1. 設定
2. 私たちのサイトのスターターコード
3. サイトのバケットを構成する
4. 次のステップ 😎

設定

あなた自身の個人的なウェブサイトを作成したい場合は、始めるためにドメインが必要になります。最初は使用しませんが、後の記事でカスタム ドメインを使用できるように、今すぐこれを実行する価値があります。私の場合、ドメインはafro-cloud.comでしたが、登録プロバイダーが利用可能なドメインを持っている限り、思いつくものを何でも選択できます。使用できるドメイン登録プロバイダーは多数あり、私は個人的に GoDaddy を使用しましたが、利用可能なオプションのサブセットを次に示します (私はこれらのサービスのいずれとも提携していません)。

• ゴーダディ
• ブルーホスト
• スクエアスペース

ドメインを設定したので、Google Cloud アカウントを作成して課金を有効にしましょう。

1. Google Cloud コンソールに移動します
2. 既存の Google アカウントを使用するか、新しいアカウントを作成してコンソールにアクセスします (これは Google Cloud を使用するために必要です)
3. 画面上部のバーにあるプロジェクト選択ドロップダウンをクリックして、新しいプロジェクトを作成します。
4. 「お支払い」に移動します
5. Google Cloud が提供する手順に従って、新しい請求先アカウントを作成します。

素晴らしい！課金が有効になったので、Google Cloud サービスの使用を開始できます。現時点ではこのタブの設定はすべて完了していますが、記事の後半でこのページに戻ってくるので、手元に置いておいてください。

私たちのサイトのスターターコード

この記事で説明する手順に従うのが難しい場合は、ご連絡ください。問題のデバッグをお手伝いできるよう最善を尽くします。さて、それを整理したので、続けてみましょう。静的エクスポートがサポートされているため、他の React.js フレームワーク (または単に React) ではなく Next.js を使用します。 React.js アプリケーションをホストするにはさまざまなデプロイメント オプションが多数ありますが、SEO の利点とコスト削減を考慮して、Google Cloud Storage と Next.js のアプローチを共有することを選択しました。 Next.js の静的エクスポートを使用すると、運用ビルドが作成されるときに、別個のチャンク内の HTML ファイルに対応する静的アセット (CSS および JS ファイル) とともに、ルートごとに HTML ファイルが作成されます。これは、表示されているページに不要な JavaScript バンドルの読み込みを回避できるため、ページの読み込みが高速化されるため重要です。 「次のビルド」の実行によって生成されたすべてのファイルは、「out」フォルダーにエクスポートされます。ただし、これについては後で詳しく説明します。アプリを作成しましょう。

まず、スターター Next.js プロジェクトをマシンにインストールしましょう。幸いなことに、Next.js には、Create React App を使用したことのある人向けの「create-next-app」ユーティリティがあります。ワークフローを開始するには、次のコマンドを実行します。

npx create-next-app@latest

このコマンドにより、プロジェクトのいくつかの構成オプションが表示されます (自由に選択してください。必要なのはコード生成だけです)。この記事で使用するオプションを太字にしました。

• あなたのプロジェクトの名前は何ですか?私のアプリ
• TypeScript を使用しますか?いいえはい
• ESLint を使用しますか?いいえはい
• Tailwind CSS を使用しますか?いいえはい
• `src/` ディレクトリを使用しますか?いいえはい
• App Router を使用しますか? (推奨) いいえ /はい
• デフォルトのインポート エイリアス (@/*) をカスタマイズしますか?いいえはい

いいですね、コードができました! node_modules フォルダーにデータが設定されているので、アプリケーションを実行するために必要な依存関係がすべてインストールされていることがわかります。プロジェクトの作成に使用したのと同じターミナル ウィンドウで、コマンドnpm run devを実行してみましょう。これにより Next.js 開発ワークフローが開始され、アプリケーションをローカルで表示できるようになります。 Next.js は、コンピューター上でプロジェクトを表示するための URL を提供します。ほとんどの場合、これはhttp://localhost:3000になりますが、別の Web アプリを実行している場合は、3001 などの別のポートが選択される可能性があります。リンクをクリックすると、次のような内容が表示されるはずです。

ニース！スターター アプリケーションが稼働中です。ただし、より古典的な「Hello World」の例を実行するために、スターター ページを削除してみましょう。 src/app/page.tsx (または page.jsx) ファイルを更新して、次の内容を含めます。

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

ファイルを保存し、アプリケーションを実行しているブラウザーのタブに戻り、ページをリロードします。画面に「Hello world」と表示されるはずです。ここで、静的エクスポートを機能させる作業に戻りましょう。この機能を有効にするには、next.config ファイルを設定する必要があります。 nextConfig 宣言を次のように更新します。

const nextConfig = { output: "export", };

これにより、ビルド プロセス中に Next.js に、アプリケーション内の各ルートに対応する個別の HTML ファイルを作成するように指示されます。現時点ではページが 1 つだけなので、別のページを追加して静的エクスポートの利点を説明しましょう。 app/ ディレクトリ内に、「test」という名前の新しいディレクトリを作成します。新しく作成したディレクトリ内に page.tsx (または page.jsx) ファイルを追加し、次のコードを追加します。

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

テスト ページができたので、ホームページからそのページへのリンクを追加しましょう。 src/app/page.tsx (または page.jsx) を開き、次のようにファイルを更新します。

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

新しく更新されたファイルを保存し、アプリケーションを実行しているブラウザーのタブに戻り、ページをリロードします。 「Test Page!」という新しいリンクが表示されるはずです。そのリンクをクリックすると、画面上のコンテンツが「Hello test!」と表示されるように変わります。うまくいきました。これで、アプリケーションに 2 つのルートができました。ここで、これまで説明してきた静的エクスポート機能の出力をチェックアウトしてみましょう。ターミナル ウィンドウに戻り、「npm run build」を実行します。このコマンドは、「次のビルド」コマンドを実行します。これにより、作業用の実稼働準備が整ったビルドが作成され、結果がプロジェクトのルートにあるディレクトリに保存されます。 out ディレクトリを調べると、次のような内容が表示されるはずです。

• _next: サイトを実行するために必要な静的アセットが含まれています。各 HTML ページの JavaScript と CSS のチャンクを考えてください (例: 404.html: Next.js が生成するデフォルトの 404 ページです)
• favicon.ico: 私たちのサイトのウェブサイトアイコン
• Index.html: ルート ページの HTML ファイル (src/app/page.tsx または page.jsx)
• Index.txt:index.html ページのリソースのマッピングを含むファイル
• test.html: ルート ページの HTML ファイル (src/app/test/page.tsx または page.jsx)
• test.txt: test.html ページのリソースのマッピングを含むファイル

皆さん、素晴らしい仕事でした。次に、ギアを変えてコードを Google Cloud にアップロードして、サイトをライブで確認できるようにしましょう。

サイトのバケットを構成する

コードの準備ができたので、Google Cloud がインターネット上でサイトにサービスを提供できるように、コードを Google Cloud Storage にアップロードする必要があります。 [Google Cloud] タブに戻りましょう。

画面左側のハンバーガーメニューを開き、「クラウドストレージ」を選択します。画面の上部に「作成」ボタンが表示されます。それをクリックすると、作成ワークフローが開始されます。まだカスタム ドメインを使用しないため、バケットには任意の名前を付けますが、一意性の制限に注意してください。私の場合は「somerandombucket123」を使用します。次に、米国内でマルチリージョン オプションを使用します (この記事を書いているのはそこです) が、ユースケースに合わせて自由に調整してください。次に、事前に設定されている標準のデフォルト クラス オプションを選択します。次のオプションは、バケットをインターネット経由でパブリックにアクセスできるようにするかどうかに関係します。この場合、これらのファイルを視聴者に提供したいので、「このバケットにパブリック アクセス防止を適用する」のチェックを外して、すべてのファイルがインターネット経由でアクセスできるようにします。コストを低く抑えるために、「均一」アクセス制御を選択し、「データ保護」サービスは選択しません。次に、「作成」ボタンを押します。

バケットを作成したので、ユーザーがバケット ファイルを表示できるように新しい権限を追加する必要があります。 「アクセス許可」タブを選択し、「アクセスの許可」ボタンをクリックします。 [新しいプリンシパル] に「allUsers」と入力し、[クラウド ストレージ] で [環境とストレージ オブジェクトの閲覧者] のロールを選択します。

バケットを公開するかどうかを尋ねるダイアログが開くので、「パブリックアクセスを許可」を選択します。したがって、「パブリックアクセスを許可」を選択します。これで、このバケットのファイルがパブリックにアクセスできるようになります。バケットの詳細ページで戻る矢印をクリックして、概要ページに戻ります。使用した構成オプションを含む新しく作成されたバケットが表示されるはずです。次に、Web サイトのバケットに指示する必要があります。これを行うには、新しく作成したバケットの行の 3 つの点をクリックします。 「Web サイト設定の編集」を選択すると、次のような内容が表示されるはずです。

インデックス ページの入力には「index.html」と入力し、エラー ページの入力には「404.html」と入力します。これらのファイルは、私たちが望んでおり、すぐに使用する Next.js アプリケーションのビルド出力のファイルと一致していることがわかります。 [保存]をクリックして変更を完了します。

次に、Web サイトを稼働できるように、コードの out ディレクトリに含まれるファイルをこのバケットにアップロードする必要があります。これを手動で行うには、バケットのバケット詳細ページに移動し、各ファイルまたはフォルダーを個別に選択します。ただし、プログラム的にこれを行うためのコードを作成してみましょう。 IDE またはコードを更新している場所に戻り、プロジェクトのルートに Upload.sh という新しいファイルを作成しましょう。次の内容を追加します。

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

必ず「somerandombucket123」をバケット名に置き換えてください。ここでは、コードのセマンティクスについてはあまり心配しないでください。基本的に私たちがやっていることは次のとおりです。

1. 古い本番ビルドを削除する
2. 新しい本番ビルドの作成
3. Google Cloud CLI を使用して本番ビルドのコンテンツをバケットにアップロードする

このスクリプトを実行する前に、Google Cloud CLI をダウンロードする必要があります。ここの手順に従ってください。インストール後、ターミナルでgcloud auth loginを実行する必要があります。これにより、Google Cloud CLI を使用するためのアクセスが承認されます。詳しい手順と背景については、ドキュメントを参照してください。正常に認証できたら、package.json に新しい実行スクリプトを追加しましょう。 「scripts」オブジェクト内に新しいスクリプト エントリを追加して、アップロード スクリプトを登録します。

"upload": "sh upload.sh"

次に、テストしてみましょう。ターミナルを再度開き、「npm run Upload」を実行します。これによりスクリプトが実行され、バケットで行われたアップロードに関する出力が表示されるはずです。 Google Cloud Storage ページに戻ってバケットを開くと、アップロードしたばかりのファイルが表示されるはずです。 https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (YOUR_BUCKET_NAME はバケットの名前) に移動すると、サイトが表示されます。ただし、デフォルトの Next.js スタイルが消えており、テスト ページへのリンクが壊れていることに気づくでしょう。何か理由はありますか？

ブラウザコンソールを開くと、リソースが見つからないというエラーが大量に表示されるはずです。言い換えれば、ブラウザは、サイトにロードするように指示されたファイルを見つけることができません。よく見ると、リソースの URL が正しくなく、パスにバケット名が欠落していることがわかります。カスタム ドメインを使用し、DNS を適切に構成していれば、この問題は発生しませんでした。ただし、この投稿の目的のために、ルーティングを修正するための追加のコードを追加しましょう。 src/app/page.tsx (または page.jsx) を開き、次のようにファイルを更新します。

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

必ず「somerandombucket123」をバケット名に置き換えてください。次に、next.config ファイルを次のように更新します。

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

繰り返しますが、「somerandombucket123」を実際のバケット名に置き換えてください。上記のコード スニペットでは、ノード環境変数が運用環境 (Next.js によって設定) である場合に、バケット名を考慮する追加のロジックが追加されていることがわかります。設定ファイル内のリソースが見つからないエラーを修正するためにアセット プレフィックスを追加し、ルートのプレフィックスにバケット名を付けることでホームページのルーティング エラーを考慮しています。コードをアップロードして、機能するかどうかを確認してみましょう。もう一度、キックオフします: npm run Upload。 Web サイトに戻り、ページをリロードします。どうだったでしょうか？サイトは、現在ローカルにあるものを反映する必要があります。プロセスの開始時に、ドメイン名と一致するバケットを作成すると、リソース エラーが発生しますが、それでもクライアント ルーティングの問題が発生します。したがって、残念なことに、このアプローチの 1 つの欠点は、本番サービスを提供するルートに .html サフィックスを追加するために追加のコードが必要になることです。

次のステップ 😎

後日、カスタム ドメインを提供するためにバケットに必要な DNS レコードの追加と構成変更、および Web サイトの SSL の構成について説明します。今日は何かを学んでいただければ幸いです。今後は、次のようなアイデアについてお話します。

• ページリダイレクトとSSLにCloudflareの無料枠を使用する
• Google Analyticsの設定とSEOの最適化

読んでくれてありがとう！