Github Codespacesはクラウド上で開発環境、クラウドIDEを提供するサービスです。

月60時間程度は無料で使えます。

https://github.co.jp/features/codespaces

Githubのアカウントさえあれば、クラウドの開発環境にアクセスでき、ブラウザ上（PC上でも）でIDE（VSCode）を使って開発がすぐに始められます。

今回はVue3の環境構築を構築していきます。

GithubでCodespacesを起動する

まずはGithubにアクセスして、Codespacesにアクセスします。

https://github.com/

今回は既存のリポジトリは使わずに、VueのインストールもCodespaces上で行うのでBlankのテンプレートを選択します。

数秒ほどでブラウザ上でVSCodeが起動します。よく見慣れた画面ですね。

ターミナルでコマンド実行もでき、デフォルトでPHPやNode、Ruby、Pythonなどいろいろなプログラミング言語が使用可能になっています。

ターミナル上でVueをインストールしていきます。

npm init vue@latest .

「.」とすることで、リポジトリ直下にvueをインストールできます。

vueプロジェクトがインストール出来たら、npm packageをインストールしておきます

npm install

vueをこの状態で起動しても、ブラウザからアクセス出来ないのでviteの設定を変えていきます。

vite.config.jsを開いて、

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // ここを追加
  server: {
    host: true,
  }
})

この状態で、vueを起動します。

npm run dev

ターミナル上の http://localhost:5173 をクリックすると別タブでVueアプリケーションの画面が開きます。

今回は右下に出てきた、すべての転送されたポートを表示から、同一画面上にVueの画面を開いていきます。

ローカルアドレスの右側のボタンを押すと、

このようにVueの画面が表示されます。エディタとVueの画面を見ながら開発できます。

実際にコードを編集すると、画面リロードなしで反映されます。ｈｍｒも効いていますね。

Gitリポジトリを作成してコミットする

現段階ではCodespaces上でVueのアプリケーションを実行しているだけで、Gitのリポジトリは作成されていません。

この開発環境を削除すると、コードも消えてしまうのでGitリポジトリ化してコードをコミットしていきましょう。

左メニューよりGitを選択して、Publish to Githubを押します。

適当にリポジトリ名をつけて、private repositoryで作っておきます。

以下のようにメッセージが出てきたら、リポジトリ作成完了です。

CodespacesをローカルPCのVSCodeで使う

ローカルPCのVSCodeでもCodespacesにアクセスできるので、そちらも使っていきましょう。 使い方は簡単で、先程作成したcodespaces選択して

「Open in Visual Studio Code」を開きましょう。

このように開けます。リモート上で実行するときと同様にターミナルを開いて、

npm run dev

を実行して「http://localhost:5173」にアクセスできます。

GitHub Codespaces 料金・無料枠の確認する

GitHub Codespacesは月60時間程度無料で使えるのですが、正確には1ヶ月あたり120コアが無料枠ととなります。

Blankのcodespaceを開くと、最小の2コアの環境が起動されます。

つまり2コアを毎時消費するので、120コア使えるということは60時間使えるということです。最小が2コアで2コア単位でスペックを強化していくことができます。

vueの開発では2コアで、今のところ十分です。

使用率の確認

どのくらい月の無料枠を消費しているかを確認してみましょう。

Settingsを開いて、

Billing and plansのPlans and useageを選択します。

Codespacesの欄にUseage hoursとStorageがあります。

これが無料枠の消費状況です。ストレージにも容量制限がありますが、15GBもあるのでそうそう超えることは無いでしょう。

今回は、CodespacesでVueの開発環境を構築してみましたが、かなりサクサク動作して起動までも高速でとても開発しやすいなといった印象です。

VSCodeのプラグインをデフォルトでインストールするようにする

codespacesでプロジェクトを開いたとき、VSCodeのプラグインは何もインストールされていない状態です。

VSCodeからインストールするべき、プラグインの提案をしてくれるんですが都度インストールするのも手間なので、起動時にインストールされるように設定しておきましょう。

プロジェクト直下に

devcontainer/devcontainer.js

とファイルを作成して、extensionsにインストールしたいプラグインを入力しておきます。

{
    "extensions": [
        "Vue.volar"
    ]
}

この状態をリポジトリにコミットしておくと、次回から起動するときにVue.volarがインストールされます。

ちなみにこのプラグインはVueの開発をサポートするプラグインなので入れておきましょう。