今回はVue.jsで作成したWEBアプリを外部に公開出来るよう、Amazon S3を利用します。外部に公開することが目的ですので、Vus.jsのサンプルページを使います。

環境

yarn 1.15.2
npm 6.9.0

ローカル環境で起動確認

Macの作業用ディレクトリから以下のコマンドを実行して、【http://localhost:8080/】でVue.jsのページにアクセス出来ることを確認します。

$ npm run serve

vuejs-s3-website11

作業用ディレクトリ内のファイルは以下のとおりです。この状態から作業を始めます。

$ ls
README.md  babel.config.js  node_modules  package.json  public  src  yarn.lock

ビルドを実行する

ビルドとは、プログラミング言語で書かれたソースコードを元に実行可能ファイルや配布パッケージを作成する処理のことです。

$ yarn build

ビルドが完了すると、以下のメッセージが出ます。

DONE  Build complete. The dist directory is ready to be deployed.

lsコマンドで確認をすると、「dist」ディレクトリ作成されているのが確認出来ます。この「dist」ディレクトリをS3にアップロードします。

Amazon S3でバケットの作成

AWSのマネジメントにコンソールにログインし、S3を選択します。そしてバケットの作成を開始します。「アクセス許可の設定」にたどり着いたら、赤枠で囲んだのチェックボックスのチェックを外しておきます。

vuejs-s3-website6

distディレクトリをS3にアップロード

AWS CLIを使いdistディレクトリをS3にアップロードします。

$ aws s3 cp dist 's3://バケット名' --recursive

AWS CLIがまだ未設定の場合は、以下から確認出来ます。
macOS に AWS CLI をインストールする

静的ホスティングの設定

Amazon S3を操作します。「プロパティ」→「Static website hosting」の順でクリックします。

vuejs-s3-website3

「このバケットを使用してウェブサイトをホストする」をクリックし、「インデックスドキュメント」にindex.htmlを入力します。その後、「保存」をクリックします。

vuejs-s3-website7

バケットポリシーの設定

Amazon S3のバケットポリシーを設定します。「アクセス権限」→「バケットポリシー」の順でクリックします。

vuejs-s3-website5

そして、以下のポリシーコピーしてバケットポリシーエディタに貼り付けます。このとき「バケット名」を自分の環境にあわせます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::バケット名/*"
            ]
        }
    ]
}

設定後、「パブリック」と表示が出ていればOKです。

vuejs-s3-website8

ブラウザで確認

「Static website hosting」のエンドポイントをコピーします。

vuejs-s3-website9

ブラウザで確認します。

vuejs-s3-website10

これで「http://localhost:8080/」から、「http://xxxxx-ap-northeast-1.amazonaws.com/」でアクセス出来ることを確認出来ました。

以上です。

参考

Vue.js入門ハンズオン 〜環境構築からS3静的ホスティングで世の中に公開するまで〜