Hello, I'm Cloud! A full-time software engineer with 8+ years of industry experience looking to pay it forward!
Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.
この投稿の目的は、月額 1 ドル未満で独自の静的な個人 Web サイトを作成する方法を紹介することです。おそらく、「今読んだばかりだったかな?」と思っているかもしれません。やったね!もちろん、その目標を達成するには注意点がありますが、Web サイトの開始当初は、独自の静的 Web サイトをホストするのにかかる費用は実際には月額 0.01 ドルだけです。この投稿の対象読者は、JavaScript の経験があり、Web 開発について一般的な理解がある人です。そのような背景がなくても、心配する必要はありません。誰でも理解できるように、この投稿内のアイデアとコンセプトを説明するために最善を尽くします。
GCP の月額費用
始める前に、最初のサイトを作成するために使用するさまざまな用語を理解するために、いくつかの定義を理解しましょう。サイトを Google Cloud に追加するプロセスを進める際には、次の定義を自由に参照してください。
この記事は、読者が Web サイト開発とプログラミングに関する基礎知識を持っていることを前提としています。各読者は次のようなものを持っていると仮定します。
私は、目標を少しずつ作業の塊に分割することで、よりよく考える傾向があります。 Web サイトを作成するときに、このようにタスクを組み立ててみましょう。
あなた自身の個人的なウェブサイトを作成したい場合は、始めるためにドメインが必要になります。最初は使用しませんが、後の記事でカスタム ドメインを使用できるように、今すぐこれを実行する価値があります。私の場合、ドメインはafro-cloud.comでしたが、登録プロバイダーが利用可能なドメインを持っている限り、思いつくものを何でも選択できます。使用できるドメイン登録プロバイダーは多数あり、私は個人的に GoDaddy を使用しましたが、利用可能なオプションのサブセットを次に示します (私はこれらのサービスのいずれとも提携していません)。
ドメインを設定したので、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
このコマンドにより、プロジェクトのいくつかの構成オプションが表示されます (自由に選択してください。必要なのはコード生成だけです)。この記事で使用するオプションを太字にしました。
いいですね、コードができました! node_modules フォルダーにデータが設定されているので、アプリケーションを実行するために必要な依存関係がすべてインストールされていることがわかります。プロジェクトの作成に使用したのと同じターミナル ウィンドウで、コマンドnpm run devを実行してみましょう。これにより Next.js 開発ワークフローが開始され、アプリケーションをローカルで表示できるようになります。 Next.js は、コンピューター上でプロジェクトを表示するための URL を提供します。ほとんどの場合、これはhttp://localhost:3000になりますが、別の Web アプリを実行している場合は、3001 などの別のポートが選択される可能性があります。リンクをクリックすると、次のような内容が表示されるはずです。
Next.js スターター画面
ニース!スターター アプリケーションが稼働中です。ただし、より古典的な「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 ディレクトリを調べると、次のような内容が表示されるはずです。
フォルダー構造
皆さん、素晴らしい仕事でした。次に、ギアを変えてコードを Google Cloud にアップロードして、サイトをライブで確認できるようにしましょう。
コードの準備ができたので、Google Cloud がインターネット上でサイトにサービスを提供できるように、コードを Google Cloud Storage にアップロードする必要があります。 [Google Cloud] タブに戻りましょう。
画面左側のハンバーガーメニューを開き、「クラウドストレージ」を選択します。画面の上部に「作成」ボタンが表示されます。それをクリックすると、作成ワークフローが開始されます。まだカスタム ドメインを使用しないため、バケットには任意の名前を付けますが、一意性の制限に注意してください。私の場合は「somerandombucket123」を使用します。次に、米国内でマルチリージョン オプションを使用します (この記事を書いているのはそこです) が、ユースケースに合わせて自由に調整してください。次に、事前に設定されている標準のデフォルト クラス オプションを選択します。次のオプションは、バケットをインターネット経由でパブリックにアクセスできるようにするかどうかに関係します。この場合、これらのファイルを視聴者に提供したいので、「このバケットにパブリック アクセス防止を適用する」のチェックを外して、すべてのファイルがインターネット経由でアクセスできるようにします。コストを低く抑えるために、「均一」アクセス制御を選択し、「データ保護」サービスは選択しません。次に、「作成」ボタンを押します。
バケットを作成したので、ユーザーがバケット ファイルを表示できるように新しい権限を追加する必要があります。 「アクセス許可」タブを選択し、「アクセスの許可」ボタンをクリックします。 [新しいプリンシパル] に「allUsers」と入力し、[クラウド ストレージ] で [環境とストレージ オブジェクトの閲覧者] のロールを選択します。
バケットのアクセス許可
バケットを公開するかどうかを尋ねるダイアログが開くので、「パブリックアクセスを許可」を選択します。したがって、「パブリックアクセスを許可」を選択します。これで、このバケットのファイルがパブリックにアクセスできるようになります。バケットの詳細ページで戻る矢印をクリックして、概要ページに戻ります。使用した構成オプションを含む新しく作成されたバケットが表示されるはずです。次に、Web サイトのバケットに指示する必要があります。これを行うには、新しく作成したバケットの行の 3 つの点をクリックします。 「Web サイト設定の編集」を選択すると、次のような内容が表示されるはずです。
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」をバケット名に置き換えてください。ここでは、コードのセマンティクスについてはあまり心配しないでください。基本的に私たちがやっていることは次のとおりです。
このスクリプトを実行する前に、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 の構成について説明します。今日は何かを学んでいただければ幸いです。今後は、次のようなアイデアについてお話します。
読んでくれてありがとう!