ベータ版の Project IDX で .NET 6 と Azure Functions の開発環境を作ってみた

Google から Project IDX という、ブラウザベースの IDE が発表されました。テンプレートが用意されている開発環境以外に、自分が用意した構成で開発環境を動かせるようなので、早速 .NET 6 と Azure Function 用の開発環境を作ってみました。

## ローカルで検証用 Azure Functions を作成

```bash:bash
prefix=mnridxfa

func init $prefix --dotnet

cd $prefix

func new --name ${prefix}http --template HttpTrigger
```

## Project IDX 用の構成ファイルを作成

```bash:bash
mkdir .idx

cat <<EOF > .idx/dev.nix
# see: https://developers.google.com/idx/guides/customize-idx-env
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.dotnet-sdk
    pkgs.azure-functions-core-tools
    pkgs.azure-cli
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      # "vscodevim.vim"
    ];
  };
}
EOF
```

## GitHub のプライベートリポジトリにプッシュ

```bash:bash
rm -rf .vscode

sed -i 's/local.settings.json/# local.settings.json/g' .gitignore

git init

git add -A

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/mnrst/mnridxfa.git

git push -u origin main
```

## Project IDX の初期設定

https://idx.google.com/

[https://idx.google.com/](https://idx.google.com/) にアクセスします。

### import a repo を選択

![project-idx-azure-functions-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/2afde054-1a13-01d2-70d7-98d78bf63cf1.png)

### Repo URL に GitHub の URL を入力

![project-idx-azure-functions-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/4d5f7f8b-acaa-8c59-b4ba-d2348e22036b.png)

### ワークスペース設定中画面

![project-idx-azure-functions-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/3b7e5274-08e8-14bb-e42f-530d89b8c27b.png)

### GitHub 拡張を使う

![project-idx-azure-functions-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/82569185-7089-4ad2-9487-0a135d9323e2.png)

### ワンタイムコードを使って GitHub に進む

![project-idx-azure-functions-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/5fff1e58-cccc-c950-9961-0dc80f48691d.png)

### コードをペーストして継続

![project-idx-azure-functions-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/343fa12b-db51-3df1-a11e-0b37b42ddc71.png)

### 許可します

![project-idx-azure-functions-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/4f039f42-8ee3-93d9-aa36-a1407832167d.png)

### 環境の作成が進む

![project-idx-azure-functions-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/bb0bd56a-0d38-55e4-9c65-b394123cdddb.png)

### 開発環境が作成された状態

![project-idx-azure-functions-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/8471cac4-ecb8-16f5-5dd2-ccb6f3f8930e.png)

### .NET と Functions Tools と Azure CLI のバージョン確認

![project-idx-azure-functions-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/4622cf3d-64ca-7811-b99e-00a5878e0b19.png)

## 次回以降の開発環境へのアクセスはここから

![project-idx-azure-functions-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675885/06fd136e-444f-fcb7-c692-e70c03d41914.png)


## 参考

https://developers.google.com/idx?hl=ja