はじめに

VuejsとVuetifyをEC2(Amazon Linux２)で利用する機会があったのでインストールまでの手順を備忘録として残しました。
同様のケースがある方にも参考になればと思います。

前提条件

EC2の構築までは完了していることが前提です。
まだの方は下記URLを参考にして構築してみてください
・チュートリアル: Amazon EC2 Linux インスタンスの開始方法

インストール手順

4ステップです。

Node.jsのインストール（vue-cliの利用に必要）
vue-cliのインストール
Vue.jsのプロジェクト作成
Vuetifyのインストール

1. Node.jsのインストール（vue-cliの利用に必要）

ダウンロードして、

curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash -

インストール。

sudo yum install --enablerepo=nodesource nodejs

2. vue-cliのインストール

Vuejsの環境を構築する際にはvue-cliを利用するととても便利なのでvue-cliをインストールします。

npm install -g @vue/cli

3. Vue.jsのプロジェクト作成

my-app にはプロジェクト名を記入。

vue create my-app

2022年2月時点ではVuetifyはVuejs3をサポートしていなため、[Vue 2]を選択し、[Enter(return)]。

「Successfully」と表示されればプロジェク作成は完了です。

念の為Vuejsを起動し、ブラウザから確認してみましょう。

①先ほど作成したプロジェクトのディレクトリに移動。

cd my-app

②Vuejsの起動

npm run serve

③ブラウザにアクセス
・EC2で構築した場合は、「パブリック IPv4 DNS」または「パブリック IPv4 アドレス」を利用。
※アクセスできない場合はセキュリティグループの設定がされていない可能性があるので、セキュリティグループでhttpの8080を許可されているか確認してみてください。
http://「パブリック IPv4 DNS」または「パブリック IPv4 アドレス」:8080/

・ローカル環境で構築した方は下記にURL。
http://localhost:8080/

このようなページが表示されたら成功です！
次はVuetifyをインストールしますので、ターミナルから「control + c」で一度サーバーを停止しましょう。

4. Vuetifyのインストール

vue add vuetify

今回はそのまま「Default」を選択。

「Successfully」と表示されればVuetifyのインストールはが完了です。

ブラウザからもVuetifyがインストールされていることを確認しましょう。
先程と同様 npm run serve　で起動し、ブラウザからアクセスするとページのデザインがVuetifyになっていればVuetifyが正常にインストールされ利用できる状態になっています。お疲れさまでした