#はじめに
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が正常にインストールされ利用できる状態になっています。お疲れさまでした
