2021.12.07
VSCodeのWeb版からソースコードを修正してみた
VSCodeがWebブラウザ上で操作可能に
VSCodeをブラウザだけでどこまで操作できるか、試してみました。
以下のような構成の想定です。
■結論
現状は、ユーザの「認証」だけはローカルPCで1度実施する必要があります。
認証してしまえばGithub上からretrieve/deployも可能です。
VSCodeをインストールできないけど、ちょっとソース更新したい時、外出先でスマホやタブレットから更新したい時などに使えるかもしれません。
■スマホとタブレット
Web版のVSCodeはiPhone/iPadからもアクセスできるので、キーボードを外付けすればどこでもソース編集ができそうです。
Githubのページからソース編集するよりは遥かにやりやすいです。
■注意点
- ソースの削除は苦手です。
- 画面やクラスの新規追加はSalesforce側で作成してRetrieveするのが早いです。
また、仕組み上の問題でdeployとretrieveには時間かかります。 - 修正したソースだけdeployができない。
修正分だけデプロイできる仕組みを考えないとダメかと思います。
今回のサンプルはforce-app以下全部デプロイする仕組みにしてあります。
変更があったものだけ反映されますが、他の経路からSalesforce上のソース更新している場合、上書きしてしまいます。 - StaticResourceは含めないほうが無難です。
- GithubActionsの利用にあたっては以下のページを見てください。
Publicならあまり気にならないですが、完全に無料ではないです。
VSCode Web版へのリンク
VSCode Web版については、下記ページをご覧ください。
検証に必要なもの
- SalesforceのSandboxやDEV組織
- Githubのアカウント
- ローカルのSalesforce CLI
ひとまずは上記が必要です。 なお、編集するSalesforce上のソース、ページなどは自前で用意しておいてください。
また、以下の知識が必要です。必要に応じてヘルプなどご確認ください。
- Linuxのコマンド
- gitのコマンド
- Salesforce CLIのコマンド
手順
- Githubにアカウントを作成する。
- Githubでリポジトリを作成する。→ReadMeが用意してあるとわかりやすいかと思います。
- https://vscode.dev/ を開く
- 「Open Remote Repository」を選択してGithubと連携する。(ここまででVSCodeとGithubは連携できています。ReadMeが見えるはず)
- SalesforceのDeveloper組織を準備する。(Sandboxでも可)
- ローカル環境へSalesforce CLIをインストールする。
- ローカル環境で上記Salesforce組織を認証する。
- 認証情報をGithubのリポジトリのSecrets項目へ保存する。
- VScodeweb上で以下の2ファイルを作成してCommitする。
- manifest/package.xml
- sfdx-project.json
それぞれの環境に合わせて上記のファイルを記載、Commitしてください。
- Github上で、「Actions」を選択、YAMLを編集して処理を書く。(retrieve.yaml)
- Actionを実行してSalesforceのソースを取得する。(VSCodeの画面をリロードする)
- Github上で、「Actions」を選択、YAMLを編集して処理を書く。(deploy.yaml)
- VSCode上でソースを編集してCommit/pushする。
-
Salesforceにソースが反映されることを確認する。
すでに実施済みの部分は飛ばしても問題ないです。
実際に設定してみましょう。
1.Githubにアカウントを作成する(省略)
2.Githubにリポジトリを作成する(省略)
3.https://vscode.dev を開く(省略)
4.「Open Remote Repository」を選択してGithubと連携する。(ここまででVSCodeとGithubは連携できています)
5.SalesforceのDeveloper組織を準備する。(Sandboxでも可)(省略)
6.ローカル環境へSalesforce CLIをインストールする。(省略)
7.ローカル環境で上記Salesforce組織を認証する。
-
認証
sfdx auth:web:login
上記のコマンドをローカルPCで実行する。
Salesforce CLIをインストール済みの前提です。 -
認証情報のコピー
sfdx force:org:display -u <ログイン組織の別名> --verbose
認証後、上記のコマンドをローカルPCで実行する。
表示された以下の部分の「force://PlatformCLI::hogehogehoge」をコピーする。
sfdx Auth Url force://PlatformCLI::hogehogehoge
8.認証情報をGithubのリポジトリのSecrets項目へ保存する。
- 認証情報として「SFDX_AUTH_URL」
- Gitへのコミットを行うため、以下の2項目もSecretsに保存する。
「EMAIL」: GitアカウントのEmailアドレス
「UNAME」:Gitアカウントのユーザ名
9.VScode上で以下の2ファイルを作成してCommitする。
- manifest/package.xml
- sfdx-project.json
10.Github上で、「Actions」を選択、YAMLを編集して処理を書く。
retrieve.yamlの内容をコピーして保存する。
このWorkflowは、手動で実行します。
# This is a basic workflow to help you get started with Actions name: retrieve # Controls when the workflow will run on: # Triggers the workflow on push or pull request events but only for the main branch workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: node-version: '>=14' check-latest: true # Install Salesforce CLI - name: Install Salesforce CLI run: | DSTDIR=./force-app if [ ! -d $DSTDIR ]; then mkdir $DSTDIR fi npm install sfdx-cli node_modules/sfdx-cli/bin/run --version node_modules/sfdx-cli/bin/run plugins --core - name: 'SFDX_AUTH_URLをSFDX_AUTH_URL_FILEファイルに保存' shell: bash run : 'echo ${{ secrets.SFDX_AUTH_URL }} > SFDX_AUTH_URL_FILE' - name: 'Authenticate' run: node_modules/sfdx-cli/bin/run force:auth:sfdxurl:store -f SFDX_AUTH_URL_FILE -s -a MYDEV - name: 'retrieve devhub' run: node_modules/sfdx-cli/bin/run force:source:retrieve --manifest ./manifest/package.xml - name: git setting run: | git config --local user.email ${{ secrets.EMAIL }} git config --local user.name ${{ secrets.UNAME }} - name: ' fetch' run: | git fetch - name: ' add' run: | git add ./force-app - name: ' commit' run: | git commit -m "retrieve" - name: ' push' run: | git push origin HEAD
11.Actionを実行してSalesforceのソースを取得する。
Githubのリポジトリから「Actions」→「retrieve」を実行する。
ここまでの設定に漏れがなく正常に終了した場合、SalesforceのソースがGithubに登録されます。
ソースがGitに登録されたら、VSCodeの画面を更新してください。
12.Github上で、「Actions」を選択、YAMLを編集して処理を書く。(deploy.yaml)
「Actions」のページで「New Worekflow」を押下し、今度は「deploy.yaml」を登録します。
こちらは、Pushされた時に動作する仕様となります。
Pushされるたび起動し、Salesforceに対してソースのデプロイを実施します。
# This is a basic workflow to help you get started with Actions name: deploy # Controls when the workflow will run on: # Triggers the workflow on push or pull request events but only for the main branch push: branches: [ main ] paths: - 'force-app/**' pull_request: branches: [ main ] paths: - 'force-app/**' # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v2 with: ref: ${{ Github.ref }} fetch-depth: 0 if: Github.event.action =='opend' || Github.event.action =='synchronize' || Github.event_name == 'push' - uses: actions/setup-node@v1 with: node-version: '>=14' check-latest: true # Install Salesforce CLI - name: Install Salesforce CLI run: | npm install sfdx-cli node_modules/sfdx-cli/bin/run --version node_modules/sfdx-cli/bin/run plugins --core - name: 'SFDX_AUTH_URLをSFDX_AUTH_URL_FILEファイルに保存' shell: bash run : 'echo ${{ secrets.SFDX_AUTH_URL }} > SFDX_AUTH_URL_FILE' - name: 'Authenticate against dec hub' run: node_modules/sfdx-cli/bin/run force:auth:sfdxurl:store -f SFDX_AUTH_URL_FILE -s -a MYDEV # - name: Run apex test # run : # node_modules/sfdx-cli/bin/run force:apex:test:run --resultformat tap --codecoverage -c -r human - name: Deploy Source id: Deploy if: Github.event_name == 'push' run: node_modules/sfdx-cli/bin/run force:source:deploy -p ./force-app -u MYDEV --json --loglevel fatal
13.VSCode上でソースを編集してCommit/pushする。
適当な画面を更新してcommitします。
VSCode上でPushすると、Actionsが動作し、Salesforce側へDeployされます。
14.Salesforceにソースが反映されることを確認する。
Salesforce側でソースを更新した画面を確認します。 問題がなければ、更新が反映されているはずです。
最後に
ここまでで特に問題が起きていなければ、Salesforceのソースがgithubのリポジトリに登録され、編集してコミットした内容がSalesforceに反映されているかと思います。
みなさまの参考になれば幸いです。