ブラウザ上でコードを書く、4コア8GのMicrosoftサーバーが無料で使える、Codespacesは本当に素晴らしい

本文由简悦 SimpRead 转码，原文地址 xinchen.blog.csdn.net

コンピュータやタブレットがあれば、ブラウザさえあればコードを書くことができ、ページの効果はデスクトップ版の vscode に近く、コードのコンパイルと実行はすべて無料の Microsoft サーバー上で行われます。興味がありますか？この記事と一緒に行動しましょう。

一枚の画像は千の言葉に勝る#

まずは画像を、以下は欣宸が自分の iPad Pro でブラウザを使ってコードを書いている実際の写真で、右下には SpringBoot アプリケーションの起動成功のログが見えます
あなたはタブレットの性能が低いと思うかもしれませんが、コードを書くことや実行することがカクカクすることはありません。個人的な実体験ではスムーズに行えます。なぜなら、コンパイルや実行といったリソースを消費する操作はすべて Microsoft のクラウドサーバー上で行われるからです。サーバーの構成は 4 コア 8G メモリ 32G ハードディスクです。
さらに、サーバーは一銭もかからず、時間制限もありません…

Codespaces について#

GitHub の Codespaces は、昨年からネット上で話題になっていました。これはクラウド上にホスティングされた開発環境で、その原理は以下の通りです。私たちは自分のコンピュータで、vscode のデスクトップ版またはウェブ版を使ってコードを書き、これらの操作はすべて Microsoft の Azure 仮想マシンに同期され、コードのコンパイルと実行も仮想マシンで行われます
GitHub と Microsoft の関係については、Microsoft が GitHub を買収したと思われます…
以下は個人が体験後に得た Codespaces に関する認識です。

ブラウザ上であなたの GitHub リポジトリのコードを編集でき、ウェブページの効果はローカルの vscode に非常に似ています。
Microsoft はあなたのために専用サーバー（4 コア CPU、8G メモリ、32G ハードディスク）を用意しており、ウェブ上でコードを編集する際、対応するコンパイルや実行はこのサーバー上で行われます。

上記の特徴に基づき、以下の福利は実際に感じることができます：

タブレットでブラウザ上にコードを書き、コードを実行できます。下の図は Huawei の MatePad Pro タブレットで SpringBoot アプリケーションを作成している様子で、ログを見るとすでに起動成功しています。

下の図はタブレットのブラウザで SpringBoot アプリケーションのウェブサービスにアクセスしている実際の写真で、成功しています。これは非常に実用的です。

あなたは性能が非常に低い古いコンピュータを使って開発を行うことができます。なぜなら、リソースを消費する操作はすべて専用サーバー上で行われるため、あなたのコンピュータはブラウザをスムーズに動かすことができれば十分です。

本記事の概要#

本文の目標は基本的な体験を重視しており、以下の内容で構成されています。

いくつかの前提条件を紹介します。
Codespaces を使えるようになった経緯を説明します。
Codespaces を作成します。
開発前の基本設定を行います。
サーバーの基本情報を確認します。
Codespaces 上で新しい GitHub リポジトリのブランチを作成します。
本格的にコーディングを開始し、新しい SpringBoot アプリケーションを作成し、実行して検証します。
Codespaces のコードを GitHub にコミットします。
アプリケーションを停止する操作を行います。
再度 Codespaces を開く方法を説明します。
いくつかの小問題を紹介します。

重要な前提条件#

以下は本記事の操作を快適に行うための重要な前提条件です。

あなたのネットワークが GitHub にアクセスできること。
あなた自身の GitHub アカウントを持っていること。
あなた自身のコードリポジトリを持っていること。
欣宸は普通の Java プログラマーなので、開発体験では Java 関連の技術スタックを使用しています。例えば、コードプロジェクトは SpringBoot です。もしあなたが他の言語に精通している場合は、自分で調整してください。

失望から驚きへ#

欣宸は昨年オンライン申請フォームに記入して Codespaces の使用を申請しましたが、数ヶ月間毎回確認するたびに「お待ちください」と言われ、ついにはこのことを完全に忘れてしまいました。
申し訳ありませんが、申請先のアドレスも忘れてしまいましたが、Codespaces の公式サイトを見てみれば、申請の入り口が見つかるはずです。
こうして時間が過ぎ、欣宸は毎日食事をし、寝て、仕事をし、ブログを書いている退屈な生活を送っていましたが、数日前に以下のメールを受け取りました。「Codespaces のベータ版を使用できるようになりました」

Codespace の作成#

GitHub を開くと、ウェブページの右上角が少し変わっていることに気づきました。以下の図の赤枠で示されています。
どうやら私は Codespaces のベータ版に参加しているようです。おお、驚きです。
上の図の赤枠のボタンをクリックすると、次のアドレスに移動します：https://github.com/codespaces
ページは以下のように表示され、右上の New codespace ボタンをクリックして Codespaces を作成します。

次のページでは、自分の GitHub リポジトリとブランチから選択して Codespaces を作成するよう求められます。最後のオプションは、あなたの専用サーバーの構成を選択することです。現在は 4 コア 8G の構成しか選べません。
4 コア 8G のサーバーは高価ですか？阿里云コミュニティが欣宸に無料で提供している ECS サーバーの価格を参考にすると、2 コア 4G で、1 年 4068 RMB です。Microsoft のこの誠意は本当に素晴らしいです。

リポジトリを選択したら、右下の Create codespace をクリックすると、バックグラウンドであなたの専用サーバー（公式文書ではこれをコンテナと呼んでいます）が作成されます。
約 2、3 分待つと、vscode のページが表示されます。明らかにウェブページですが、ローカルにインストールされた vscode に非常に似ています。

上の図の右下に表示されたポップアップウィンドウに注意してください。Java プラグインパッケージをインストールするかどうか尋ねられますので、Install をクリックしてインストールを完了してください。

基本設定#

vscode を使用する際、Java 六合一プラグインと SpringBoot プラグインのインストールは基本的な操作です。
以下の図では、Java 六合一プラグインパッケージがすでにインストールされています。
次は SpringBoot プラグインです。以下の図のように。
インストールが完了したので、開発段階に入ります。

バージョンの確認#

TERMINAL ウィンドウで mvn -version と入力して、現在の maven と java のバージョンを確認します。以下の図のように、これは Linux サーバーで、java のバージョンは 17.0.2、maven のバージョンは 3.8.5 です。

このような java と maven のバージョン構成は、GitHub があなたのためにサーバーを作成する際のデフォルト構成です。おそらくあなたが思う最適なバージョンではありません。実際、GitHub はサーバー構成の変更をサポートしていますが、ここではスペースの制限があるため、しばらく我慢して HelloWorld を無理やり実行させることをお願い申し上げます。後で、デフォルト構成の変更方法についての専用の記事がありますので、java と maven のバージョンを含め、より深い設定についても説明します。

新しいブランチの作成#

先ほど選定したコードリポジトリで、選定した dev ブランチには他の用途があるため、新しいブランチを作成することにしました。操作は以下の通りです。
左下の git ブランチアイコンをクリックします。以下の図の赤枠の位置です。
ポップアップした入力ウィンドウで、Create new branch… をクリックしました。
その後、現在のディレクトリ内の内容をすべて削除しました。
クリーンなコーディング環境が整いました。これから大いに腕を振るいます：あなたのために HelloWorld アプリケーションを書きます！

SpringBoot アプリケーションの開発と実行#

新しい SpringBoot プロジェクトを作成します。
各自の習慣に応じて、私は maven プロジェクトを選択しました。
次は、SpringBoot プロジェクトを作成するための一連の質問形式のインタラクションが行われます。GAV を入力し、ライブラリを選択します（私は lombok と spring web の 2 つを選びました）。JDK は 17 を選択することに注意してください。これは現在のオンライン環境の JDK が 17 であるためです。現在の環境の JDK を変更する方法については、次の記事で詳しく説明します。
上記のコマンド入力が完了すると、新しいページがポップアップし、新しいワークスペースに入ります。以下の図は、なじみのある maven 操作ページです。
以前のワークスペースに戻りたい場合は、以下の図のように操作します。
アプリケーションのエントリポイントである HelloworldApplication.java を開き、検証のために数行のコードを追加します。ここでは RestController を使用して web パス hello を追加しました。以下の図のように、コーディングが完了したら、右上の三角ボタンをクリックしてアプリケーションを起動します。
プロジェクトのビルドを開始します。この間に依存ライブラリがダウンロードされるため、少し待つ必要がありますが、Microsoft のサーバーの性能とネットワーク速度は期待を裏切りません。約 2、3 分後にアプリケーションが成功裏に起動しました。
現在、アプリケーションはサーバー上で実行されています。web サービスが利用可能かどうかを検証するために、ポートフォワーディング機能を使用する必要があります。つまり、サーバーの特定のポートをローカルポートにマッピングします。操作は以下の図の赤枠のように行います。
表示されたポップアップウィンドウに 8080 と入力して Enter を押すと、その時点でリストに新しいポートフォワーディング構成が表示されます。下の図の赤枠の位置をクリックすると、ブラウザでフォワーディングアドレスが開きます。

この時、ブラウザは 404 を表示します。以下の図のように、これはまだパスを追加していないためです。
アドレスバーの末尾に /hello を追加して Enter を押すと、以下の図のように、先ほど作成した web インターフェースが正常にデータを返しました。

現在、ブラウザ上でコードを書き、スムーズに実行できることができ、古いコンピュータでも快適に動作する体験は本当に言葉に表せないものです。

コードの提出#

先ほど追加したブランチは Microsoft サーバー上にあり、GitHub にはまだ提出されていません。提出を忘れないように、操作は以下の図のように行います。
GitHub を開くと、新しいブランチがすでに提出されており、PR も作成されています。main ブランチにマージするかどうかを選択できます。

アプリケーションの停止#

アプリケーションを停止する操作は非常に簡単です。ターミナルパネルで Ctrl+C と入力するだけです。
ブラウザを閉じると、ローカルコンピュータには何も残っていないようで、すっきりとした感じが本当に良いです。

再度 Codespaces を開く#

再度 Codespaces を開く操作は以下の図のように、4 ステップで完了します。

偶発的な問題#

Codespaces を開く際に、時々以下の図のような問題に遭遇することがあります。ページをリフレッシュすれば復旧します。

いくつの Codespaces を作成できるか#

この問題について、公式は次のように述べています：最小で 2 台のコアコンピュータを構成でき、最大で 32 台を構成できます。
公式は無料と有料のことについては言及していませんが、無料ユーザーとして同時に 2 つの Codespaces を作成することは問題ありません。

実用性は？#

昨日、欣宸はあるコミュニティで iPad Pro でコードを書いている写真を投稿しました。すぐに誰かが「脱いで屁をこくのか？」と返信してきました。

この見解について、私はこう思います：もしあなたがタブレットで使いにくいと思うなら、コンピュータにもブラウザがありますよね。もしあなたがさらに言い争うなら、コンピュータのブラウザもデスクトップ版には及ばないと言うなら、微信のミニプログラムも存在する必要はないのではないでしょうか。結局、ネイティブアプリがあるのですから。
したがって、実用性は人それぞれであるべきだと思います… でしょうか。