AWS Cloud9 で Vue 3 開発環境を整備する

#AWS#フロントエンド
AWS Cloud9 で Vue 3 開発環境を整備する

はじめに

Cloud9 で Vue CLI v5 を用いてVue 3の環境構築をしている中で、少しはまったので備忘録として残しておきます。 以下が今回の環境です。※Vue CLIは後ほど説明する手順の中でインストールします。

$ node --version
v16.14.0
$ vue --version
@vue/cli 5.0.1
$ npm --version
8.3.1

対象者

この記事は下記のような人を対象にしています。

  • Cloud9 で Vue CLI v5 を用いて Vue 3 の環境を構築したい人

手順

node.js のインストール

Vue.js を使うにあたって、node.js が必要です。AWS Cloud9 はデフォルトで node.js がインストールされているので、下記コマンドを用いて node.js がインストールされていることを確認します。

$ node --version
v16.14.0

Vue CLI のインストール

npm で Vue CLI をグローバルインストールします。グローバルインストールとは、プロジェクト単位で使用するライブラリのインストールではなく、サーバー全体に新しいコマンドをインストールする方法だと思っておくとよいでしょう。

$ npm install -g @vue/cli

インストールされたことを確認します。

$ vue --version
@vue/cli 5.0.1

プロジェクトの作成

インストールした Vue CLI を使用してプロジェクトを作成する。 ※今回は myproject という名前で作成しています。

Vue CLI v5.0.1 では Vue 2 と Vue 3 を選択することができました。 今回は Vue 3 を選択します。

$ vue create myproject
Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
 Default ([Vue 2] babel, eslint) 
 Manually select features

モジュールのインストール

プロジェクトフォルダに移動し、モジュールをインストールします。 引数のない npm install コマンド実行をすると、カレントディレクトリにある package.json に記述されている情報を元に、そこに記述されている パッケージを node_modules （インストール先）にインストールします。

$ cd myproject
$ npm install

vue.config.js の編集

プロジェクト直下の vue.config.js を編集します。 vue.config.js は @vue/cli-service によって自動的に読み込まれるオプションの設定ファイルです。

webSocketURL の設定と allowedHosts の設定を加えています。 Vue CLI v5 では Vue CLI v4 からの破壊的変更がいくつか存在し、Vue CLI v5を使用する場合は下記の設定が必要です。（ Vue CLI v5 の破壊的変更 ） ※webSocketURL の設定を行わない場合、画面の読み込みに失敗します。 ※allowedHosts の設定を行わない場合、 Invalid Host header エラーが発生します。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 devServer: {
 client: {
 webSocketURL: 'ws://0.0.0.0:8080/ws',
 },
 allowedHosts: 'all',
 },
 transpileDependencies: true
})

サーバーを立ち上げる

$ npm run serve --open

おわりに

Vue CLI v5 を用いた Vue 3 の環境構築手順についてまとめました。ネット上にある Vue CLI v4 の情報を参考に進めたところ、vue.config.js の設定が上手くいかず時間がかかってしまいました。Vue CLI v5で環境構築する際の参考にしてください。

参考