ブラウザ上でコードを書く、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 のサーバーは高価ですか？ Alibaba Cloud コミュニティが提供する無料の 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 も作成されています。メインブランチにマージするかどうかを選択できます。

停止应用#

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

再次打开 Codespaces#

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

偶现问题#

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

可以创建多少个 Codespaces#

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

実用吗？#

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

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