AWS Cloud9 で Vite を用いた Vue 3 開発環境を構築する

AWS
2022.03.24

はじめに

AWS Cloud9 で Vite を用いた Vue 3の開発環境の構築を行ったので、その手順をまとめます。
Vite は Vue.js を開発者である Evan 氏が開発しているノーバンドルのビルドツールです。Vue.js に限らず React などでも利用できるツールで、高速に開発サーバーを構築できるとされています。詳細は公式ドキュメントをご覧ください。

環境

$ node --version
v16.19.1
$ npm --version
8.19.3

対象者

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

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

手順

node.js、npm のバージョン確認

Vue.js を使うにあたって、node.js のバージョン12.2.0以降が必要です。AWS Cloud9 はデフォルトで node.js がインストールされていますが、バージョンが条件を満たしているか確認します。

$ node --version
v16.19.1

次の手順で npm で Vite をインストールします。npm のバージョンによってインストールコマンドが異なるため、npm のバージョンを事前に確認します。

$ npm --version
8.19.3

Vite のインストール

npm で Vite をインストールします。実行が完了すると指定したプロジェクト名と同名のディレクトリが作成されます。

# npm 6.x
$ npm init vite@latest <プロジェクト名> --template vue

# npm 7+, extra double-dash is needed:
$ npm init vite@latest <プロジェクト名> -- --template vue

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

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

$ cd myproject
$ npm install

vite.config.js の編集

AWS Cloud9 は使用できるポートが8080、8081、8082に限定されています(AWS Cloud9統合開発環境 (IDE)で実行中のアプリケーションをプレビュー – AWS Cloud9)が、Vite はデフォルトで3000番ポートを使用します。
そのためプロジェクト直下の vite.config.js を編集しサーバーのポート設定を変更します。（Vite の設定 | Vite)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 8080
  },
  plugins: [vue()]
})

サーバーの起動

サーバーを立ち上げます。

$ npm run dev

Preview Running Applicationから、開発サーバーを起動できていることが確認できました。

おわりに

AWS Cloud9 で Vite を用いた Vue 3の開発環境の構築手順についてまとめました。この記事がどなたかの参考になれば幸いです。

参考

コメント

  1. ほおく より:
    3月 19, 2023 22:57

    同じようにやってみたのですが、severが起動した後、アクセスしてもブラウザからは「接続が拒否されました」と出てしまいますね。serverでoを押しても
    node:events:491
    throw er; // Unhandled ‘error’ event
    ^

    Error: spawn xdg-open ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:485:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
    Emitted ‘error’ event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:485:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
    errno: -2,
    code: ‘ENOENT’,
    syscall: ‘spawn xdg-open’,
    path: ‘xdg-open’,
    spawnargs: [ ‘http://localhost:8080/’ ]
    と出てしまいます。
    バージョンが変わって何かがダメなようですね。

  2. masawai より:
    4月 2, 2023 18:12

    おかしいですね。。
    一応、新しくCloud9を作成して動作確認しましたが、問題なくアクセスできました。(確認に用いたバージョンで記事の内容を更新しています。)
    エラーの内容を見る限り、xdg-openコマンドが見つからなかったため、プロセスが失敗していますね。なのでxdg-openコマンドが存在しないか、または環境変数にパスが設定されていない可能性がありそうです。