tencent cloud

静的ウェブサイトのホスティング

Download

フォーカスモード

フォントサイズ

最終更新日: 2024-01-09 12:42:59

操作シナリオ
TEMは、アプリケーションインスタンス+CFSを通じて静的ウェブサイトリソースホスティング機能を提供します。ここでは、業界で人気のある静的ウェブサイトサービスHugoを例として取り上げ、静的リソースホスティングのベストプラクティスをご提供します。以下では、Hugoを介してパーソナルな静的ブログを作成し、次にTEMを介してリバースプロキシアプリケーションをデプロイし、CFSと連携して静的リソースを管理し、最後にTEMが提供するアクセス設定を介してパブリックネットワーク上のパーソナルな静的ブログへのアクセスを提供します。
全体的な流れは、以下のとおりです。
1. ﻿Hugoを使用してローカルで静的ブログを発行する﻿
2. ﻿静的なブログコンテンツをCFSにアップロードする﻿
3. ﻿TEMにnginxアプリケーションをデプロイしてCFSを関連付ける﻿
4. ﻿TEMでnginxのネットワークアクセスを設定する﻿
5. ﻿（オプション）ドメイン名を設定する﻿
6. ﻿（オプション）ファイアウォールを設定する﻿
7. ﻿（オプション）CDNを設定する﻿
操作手順
手順1：Hugoを使用してローカルで静的ブログを作成する
1. Hugoをインストールします（Install Hugoをご参照ください）。
MacOSシステムを例として、次のコマンドを使用してインストールします。
brew install hugo
2. 次のコマンドを実行して、静的サイトを作成します。
hugo new site quickstart
3. 次のコマンドを実行して、トピックを追加します。
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \\"ananke\\" >> config.toml
4. 次のコマンドを実行して、ブログを追加します。
hugo new posts/my-first-post.md
5. 次のコマンドを実行して、静的ページを作成します。
hugo -D
6. 作成された静的コンテンツは、quickstartプロジェクトのpublic/ディレクトリに保存されます。
﻿
﻿
﻿
手順2：静的なブログコンテンツをCFSにアップロードする
1. CFS：ファイルシステムとマウントポイントの作成を参照して、CFSファイルシステムを購入します。
ご注意：
購入したCFSファイルシステムのリージョン、VPCネットワークは、アプリケーションがTEMにデプロイされているリージョンと一致している必要があります。
2. CFS：LinuxクライアントでCFSファイルシステムを使用するまたはCFS：WindowsクライアントでCFSファイルシステムを使用するを参照して、hugoによって作成されたpublic/ディレクトリ内のファイルをCFSファイルシステムのルートディレクトリまたはサブディレクトリにアップロードします。
手順3： [TEMにnginxアプリケーションをデプロイしてCFSを関連付ける
1. ﻿TEMコンソールにログインして、上記で購入したCFSインスタンスをアプリケーションがデプロイされている環境に関連付けます。
﻿
﻿
﻿
2. ﻿アプリケーション管理ページで、hugoという名前のアプリケーションを作成します。
﻿
﻿
﻿
3. アプリケーションをデプロイし、永続ストレージモジュールで関連付けたCFSストレージリソースを選択します。
﻿
﻿
﻿
手順4：TEMでnginxのネットワークアクセスを設定する
方法1：転送ルールを設定する（推奨）
方法2：パブリックネットワークCLBを設定する
1. ﻿アプリケーション管理ページで、作成したアプリケーションの「ID」をクリックして、アプリケーションの基本情報ページに進みます。
2. アプリケーションの基本情報ページのアクセス設定モジュールで、設定に進むをクリックして環境アクセス設定ページに進みます。
﻿
﻿
﻿
3. 環境アクセス設定ページで、新規作成をクリックしてアクセス設定ルールを作成します。
﻿
﻿
﻿
4. 完了をクリックすると、以下のIPアドレスが取得できます。
﻿
﻿
﻿
作成されたアドレスを介してhugoサービスにアクセスします。
﻿
﻿
﻿
1. ﻿アプリケーション管理ページで、作成したアプリケーションの「ID」をクリックして、アプリケーションの基本情報ページに進みます。
2. アプリケーションの基本情報ページのアクセス設定モジュールで、右上隅の編集と更新をクリックしてパブリックネットワークCLBを追加します。
﻿
﻿
﻿
3. パブリックネットワークアクセス方法を選択し、ポートマッピング関係を入力します。
﻿
﻿
﻿
4. サブミットをクリックすると、以下のパブリックネットワークアクセスIPを取得できます。
﻿
﻿
﻿
作成されたアドレスを介してhugoサービスにアクセスします。
﻿
﻿
﻿
手順5：（オプション）ドメイン名を設定する
1. ドメイン名を登録します。
2. ドメイン名を上記で作成したCLBインスタンスに関連付けると、ドメイン名を介して静的ウェブサイトにアクセスできるようになります。ドメイン名がCLBを指定するようにDNS解決DNSPodを設定するをご参照ください。
手順6： （オプション）ファイアウォールを設定する
転送構成の設定を介して静的ウェブサイトにアクセスする場合は、Tencent CloudのWeb Application Firewallと組み合わせて静的ウェブサイトのセキュリティ保護を行うことができます。詳細な設定については、Cloud Load Balanceのリスニングドメイン名に対してWebセキュリティ保護を実行するようにWAFを設定するをご参照ください。
手順7： （オプション）CDNを設定する
より良いユーザーエクスペリエンスを提供するために、静的ウェブサイトは通常、CDNと組み合わせてアクセスをアクセラレーションします。ホスティングされている静的ウェブサイトはTencent Cloud CDNと組み合わせることができます。Tencent Cloud CDN初心者ガイドをご参照ください。