[FE構築1] Vue.js+TypeScriptをS3にアップロードする

概要

Vue.jsとTypeScriptのアプリケーションをAWSのS3にアップロードする手順を説明します。

Vue.jsアプリ作成

nodejsを以下からインストール
https://nodejs.org/ja/
確認

$ node --version
v18.14.0

vueのインストール

$ npm install -g @vue/cli
$ vue --version
@vue/cli 5.0.8
$ npm ls node-ipc

アプリ作成

$ vue create <アプリケーション名>
> use Vue3
> use npm

起動

$ cd <アプリケーション名>
$ npm run serve

ブラウザ確認

TypeScript導入

インストール

npm install typescript

.tsファイルを作成しビルド（***.jsができる）

// ***.tsがあるディレクトリで以下を実行
npx tsc ***.ts

// 自動ビルド
npx tsc *.ts --watch

Vue側から読み込む（.vueに以下を追記）

import Lib from './lib.js';

S3へアップロード

S3バケット作成、S3バケットにdist以下をアップロードし、静的ウェブサイトホスティングを有効化

バケットアクセスポリシー

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

できた

次の記事
https://zenn.dev/tofucode/articles/aeefc28c0766cd