VSCodeのリモート開発機能でSalesforceプロジェクト開発を試す(on WSL2 without Docker Desktop)

はじめに

以前VSCodeとDocker Desktopを使用してSalesforce開発環境を作成した。 (以下の記事ではmacOS上に構築) skysan87.hatenablog.com

諸般の事情でWindowsPCのDocker Desktopの利用をやめて、WSL上にDocker環境を作成し、VSCodeのRemote Developmentで開発できるようにした。

注意: リモート開発機能は現在ベータ版です。 *1

開発環境

• Windows 10 Pro (20H2/19042.1237)
• WSL v2
  • ディストリビューション: Ubuntu 20.04.3 LTS
• Docker version 20.10.8
• VSCode v1.60.2
  • 拡張機能：Remote Development Extension Pack v0.21.0(プレビュー)
• Salesforce開発モデル
  • 組織開発モデル(Org Development Model)
• Salesforce環境
  • TrailheadのPlaygroundを利用

前提条件

• Docker Desktopをアンインストールする
  • ※Docker Desktopインストール以前の環境は復元していない
• VSCodeおよび拡張機能のインストール方法は割愛
• Salesforce環境の作成方法(本番環境/Sandbox)は割愛

準備

• 下記の記事を参考にWSLにDockerをインストール
  • ネットワーク設定はデフォルトのまま

qiita.com

• WSL上のdockerを起動(daemon設定している場合は不要)

$ sudo service docker start

1. Dockerイメージを取得する

• 後述の手順でDockerイメージの取得に失敗したため、あらかじめ適当なイメージを取得する
• Docker HubのTagsから適当なものを選択する
• 今回はlatest-rc-fullを使用

# WSL
$ sudo docker pull salesforce/salesforcedx:latest-rc-full

2. WSL内にコンテナを作成

1. WSL内に空のフォルダを準備する

   • Windows側からは¥¥wsl$でWSL内にアクセス可能

2. VSCode左下の><マークをクリック > Open Folder in WSL...をクリック

   • 1で作成したフォルダを選択
   • >< の箇所にWSL: Ubuntu-20.04と表示される

3. コマンドパレット > Remote-Containers: Add Development Container Configuration Files...を選択

   • Show All Definitions... > Salesforce Project を選択
     • フォルダ内に.devcontainerフォルダが作成される
     • .devcontainer内にDockerfileが作成される

4. (場合によって不要かも) Dockerfileを開き、イメージ名を変更する

   • 理由：定義ファイルが最新のものに対応していないのか、デフォルトではイメージ取得に失敗した
   • 以下のように変更
     • 変更前: FROM salesforce/salesforcedx
     • 変更後: FROM salesforce/salesforcedx:latest-rc-full

5. 通知メッセージのReopen in Containerを選択し、完成するまで待つ

   • VSCodeでテンプレートからSalesforceのコンテナを選択するとコンテナが作成される
   • コンテナ内には、JDKやSalesforce CLI、Gitなどがインストールされている

6. Salesforce CLIを更新する

$ sfdx update

3. SFDXプロジェクトを作成

1. VSCode内でターミナルを開く

2. 以下のコマンドを実行

# 1階層上へ移動
$ cd ..
# プロジェクト名をルートフォルダ名とし、SFDXプロジェクト作成
$ sfdx force:project:create -n <ルートフォルダ名> --manifest

4. SFDXプロジェクトへ再接続

プロジェクトを作成しただけでは、リモート側でSFDX関連の拡張機能が有効にならないため、 VSCodeを再接続する必要がある。

1. VSCodeのリモート接続を終了する

2. Open Folder in WSL... → Reopen in Containerの手順で再接続

   • SFDXの拡張機能が有効になる

5. Salesforceへの認証

1. コマンドパレット > SFDX:組織を認証を選択

   • Trailheadの場合、本番環境を選択

2. 出力タブにワンタイムパスとログインURLが表示されるので、ブラウザから認証

   • https://login.salesforce.com/setup/connectへブラウザでアクセス
   • ワンタイムパスを入力
     • 以下の場合、ワンタイムパスは02WUHUVT

sfdx force:auth:device:login --setalias temp --instanceurl https://login.salesforce.com --setdefaultusername
=== Action Required!
Enter 02WUHUVT user code in the verification URL https://login.salesforce.com/setup/connect

6. Salesforceへデプロイ

1. 任意のソースを作成(Apexなど)

2. 作成したソースの画面で右クリック > SFDX:このソースを組織にデプロイ

以上!

参考記事

dev.classmethod.jp

*1:https://developer.salesforce.com/tools/vscode/ja/user-guide/remote-development/