<ul><li>この記事に書くこと<ul><li>S3にNuxt.jsのファイルをデプロイする方法</li><li>CloudFrontのディストリビューション作成、設定方法</li></ul></li><li>この記事に書かないこと<ul><li>S3, CloudFrontについての概要、基礎知識</li></ul></li></ul>

前提

バケット名　→今回は<code>nuxt-app-20240218</code>というバケット名で作成。オブジェクト所有者　→「ACL有効」に設定　※ACLを無効にすると、バケットのオブジェクトの公開設定ができなくなる。　　今回は静的Webホスティングとして公開するため、有効に設定デフォルトの暗号化　→無効に設定。　作成完了。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/450a1c9ed1834015ad239dd259c44395/image.png" alt=""> 作成したバケットを静的webホスティング用に設定していく。上記のバケット詳細の画面の下の方に「静的webホスティング」のセクションがあるのでそこから編集。　→静的webホスティングを有効に設定

S3バケットを新規作成～静的webホスティング設定

distディレクトリとはNuxtのプロジェクトをビルドした際に生成されるファイル群。.vue形式で記述したファイルが、htmlで作られた Web サイト用のファイルに変換されます。※distディレクトリごとアップロードしてしまうと、Webページにアクセスした際にindex.htmlがなく403となってしまうので注意！ 無事アップデート完了。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/08bc12b91b11486ea8e4a6b08cb11690/image.png?w=500&amp;h=401" alt="">

S3にNuxtのファイル(distディレクトリ配下)をアップロード

次に、https通信を実現するためにSSL証明書を発行していきます。主な手順としては以下の通りです。<ol><li>ドメインを購入（今回はお名前ドットコムを利用）</li><li>Route53でホストゾーンの設定</li><li>ACMを使ってパブリック証明書をリクエスト<ol><li>注意：CloudFrontで利用するためにはリージョンをバージニア北部に設定してリクエストを行う必要がある</li></ol></li><li>Route53でDNSレコードを作成（CNAMEタイプ）</li></ol> 詳細な手順は以下の記事を参考にしましたので参照ください。<a href="https://dev.classmethod.jp/articles/route53-domain-onamae/" target="_blank" rel="noopener noreferrer">https://dev.classmethod.jp/articles/route53-domain-onamae/</a>

SSL証明書を発行

事前準備

Origin domain　→作成したS3バケット名を入力<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/f9d071a6d5e144d8bed17d90abeb78ec/image.png" alt=""> オリジンへのアクセス制限<ul><li>　OAIを作成<ul><li>OAIとは？</li><li>→CloudFront内に存在する仮想的なユーザーみたいなもの。このユーザーの権限を使ってS3へのアクセス制限を行うことができる。</li><li>今回はこのOAI（CloudFront）経由でのみS3にアクセスできるようにする。</li></ul></li><li>バケットポリシーを設計する必要があるので「はい、バケットポリシーを自動で更新します」を選択 <ul><li>CloudFront側で設定したポリシーがS3側でも自動で適用される</li></ul></li></ul>　　　<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/9fede0a4dced46e7809fcd55f063e6d1/image.png" alt=""> オリジンシールドの適用　→オリジンの負荷を最小限に抑え、可用性を向上させてくれる<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ee9157e4ae4742e5bf27555bcbea9fe9/image.png" alt=""> ビューワーの設定<ul><li>Redirect HTTP to HTTPS<ul><li>httpでアクセスした際に自動でhttpsにリダイレクトしてくれる</li></ul></li><li>今回はWebサイトの閲覧が目的なのでGET, HEADメソッドのみ</li><li>今回はWebサイトの公開が目的なのでNoに設定 （yesにするとキーペアを作成する）</li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/5750c900110a48b1a3b9d1691cc3508d/image.png" alt="">https通信を実現させるための設定<ul><li>代替ドメイン名に取得したドメイン名を入力</li><li>SSL証明書はACMで発行した証明書を選択</li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3e37326d675244b5ac614b7c6e180f47/image.png" alt=""> ディストリビューション作成完了！<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4f0e0bf736524bb6895b15225969fa16/image.png" alt="">

作成時の設定

CloudFront ディストリビューションを新規で作成

<ol><li>Route53で作成したホストゾーンから、「レコードを作成」を選択</li><li>エイリアスを有効にして、「トラフィックのルーティング先」をCloudFrontに設定すると自動でディストリビューションが表示される</li></ol><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/7e2e41d044b64baea572f4cdfa26d080/image.png" alt="">

ドメインとの関連付け

S3＞バケット＞バケット名＞バケットポリシーを編集<ul><li>①があらかじめS3に設定したバケットポリシー。（誰でもアクセスできる状態）</li><li>②がディストリビューション作成時に作成したバケットポリシー （OAIを新規作成して、そのCloudFrontからでしかアクセスできない）<ul><li>①のバケットポリシーを削除</li></ul></li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/73ae18372d9e463a9b413d58e5e14bfc/image.png" alt=""> この設定により、変更前はS3のオブジェクトURIへ直接アクセスしてページを閲覧できていましたが、変更後はForbiddenで閲覧できなくなりました

S3でOAIがうまく機能しているかを確認

レコード名を貼り付けてアクセス<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/67061f93b9a246e09a69a9e0b2adfd4c/image.png" alt="">無事、アクセスすることができました。（今はドメインの更新をしていないのでディストリビューション名のドメインからアクセスしてます。）<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4c109960d1af4826b6a6f7ef052c1343/image.png" alt="">

CloudFrontからアクセス！

CloudFrontを経由してアクセスしてみよう

今回S3にフロントエンドのプロジェクトをデプロイしてCloudFrontで配信する構成をしてみました。 思ったのは、リリースのたびにS3にアップロードして、キャッシュを削除しないといけないので少し面倒だということです。 次回はデプロイの一連のワークフローのパイプラインを作っていきたいと思います。

おわりに

Nuxt.jsをS3にデプロイしてCloudFront経由でアクセスする

こんにちは、Vercelのブログにて、Nuxt.jsを使用して静的サイトを構築し、Vercelでデプロイする方法が紹介されました。 <a href="https://vercel.com/blog/nuxt-on-vercel" target="_blank" rel="noopener noreferrer">この</a>記事では、Nuxt.jsの概要や、Nuxt.jsを使用して静的サイトを構築し、Vercelにデプロイする方法が解説されています。Nuxt.jsは、Vue.jsをベースに構築されたフレームワークであり、Vue.jsと同様にコンポーネントベースでの開発が可能です。 静的サイトの構築には、Nuxt.jsのgenerateコマンドを使用することで、事前にHTMLファイルを生成することができます。また、Vercelは静的サイトのホスティングに特化しており、高速かつシームレスなデプロイが可能です。 この記事では、Nuxt.jsとVercelを組み合わせることで、静的サイトを構築し、高速かつシームレスなデプロイを実現する方法が紹介されています。静的サイトの構築やVercelの利用に興味がある方は、ぜひ<a href="https://vercel.com/blog/nuxt-on-vercel" target="_blank" rel="noopener noreferrer">この</a>記事を参考にしてください。 以上、Nuxt.jsで静的サイトを構築し、Vercelでデプロイする方法についてご紹介しました。

BuildersIO produced by YOKU

#Nuxt.js の記事一覧

Nuxt.jsをS3にデプロイしてCloudFront経由でアクセスする

Vercel Ship Day5 #2 〜Nuxt.jsで静的サイトを構築して Vercelでデプロイ〜

Auth0環境を構築して自作のAPIと連携してみた

「Googleでログイン」を実装してみた〜トークンリフレッシュ編〜

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた