2021.12.07

VSCodeのWeb版からソースコードを修正してみた

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
gettyimages (22727)

VSCodeがWebブラウザ上で操作可能に

VSCodeをブラウザだけでどこまで操作できるか、試してみました。
以下のような構成の想定です。

イメージ図

■結論

現状は、ユーザの「認証」だけはローカルPCで1度実施する必要があります。 認証してしまえばGithub上からretrieve/deployも可能です。  
VSCodeをインストールできないけど、ちょっとソース更新したい時、外出先でスマホやタブレットから更新したい時などに使えるかもしれません。

■スマホとタブレット

Web版のVSCodeはiPhone/iPadからもアクセスできるので、キーボードを外付けすればどこでもソース編集ができそうです。
Githubのページからソース編集するよりは遥かにやりやすいです。

■注意点

  1. ソースの削除は苦手です。
  2. 画面やクラスの新規追加はSalesforce側で作成してRetrieveするのが早いです。   
    また、仕組み上の問題でdeployとretrieveには時間かかります。
  3. 修正したソースだけdeployができない。
    修正分だけデプロイできる仕組みを考えないとダメかと思います。
    今回のサンプルはforce-app以下全部デプロイする仕組みにしてあります。
    変更があったものだけ反映されますが、他の経路からSalesforce上のソース更新している場合、上書きしてしまいます。
  4. StaticResourceは含めないほうが無難です。
  5. GithubActionsの利用にあたっては以下のページを見てください。
    Publicならあまり気にならないですが、完全に無料ではないです。

GitHub Actionsの支払いについて

VSCode Web版へのリンク

VSCode Web版については、下記ページをご覧ください。

Web版 VSCode

検証に必要なもの

  1. SalesforceのSandboxやDEV組織
  2. Githubのアカウント
  3. ローカルのSalesforce CLI

ひとまずは上記が必要です。 なお、編集するSalesforce上のソース、ページなどは自前で用意しておいてください。

また、以下の知識が必要です。必要に応じてヘルプなどご確認ください。  

  1. Linuxのコマンド
  2. gitのコマンド
  3. Salesforce CLIのコマンド

手順

  1. Githubにアカウントを作成する。
  2. Githubでリポジトリを作成する。→ReadMeが用意してあるとわかりやすいかと思います。
  3. https://vscode.dev/ を開く
  4. 「Open Remote Repository」を選択してGithubと連携する。(ここまででVSCodeとGithubは連携できています。ReadMeが見えるはず)
  5. SalesforceのDeveloper組織を準備する。(Sandboxでも可)
  6. ローカル環境へSalesforce CLIをインストールする。
  7. ローカル環境で上記Salesforce組織を認証する。
  8. 認証情報をGithubのリポジトリのSecrets項目へ保存する。
  9. VScodeweb上で以下の2ファイルを作成してCommitする。
    1. manifest/package.xml
    2. sfdx-project.json
      それぞれの環境に合わせて上記のファイルを記載、Commitしてください。
  10. Github上で、「Actions」を選択、YAMLを編集して処理を書く。(retrieve.yaml)
  11. Actionを実行してSalesforceのソースを取得する。(VSCodeの画面をリロードする)
  12. Github上で、「Actions」を選択、YAMLを編集して処理を書く。(deploy.yaml)
  13. VSCode上でソースを編集してCommit/pushする。
  14. Salesforceにソースが反映されることを確認する。

    すでに実施済みの部分は飛ばしても問題ないです。

実際に設定してみましょう。

1.Githubにアカウントを作成する(省略)  

2.Githubにリポジトリを作成する(省略)

3.https://vscode.dev を開く(省略)

4.「Open Remote Repository」を選択してGithubと連携する。(ここまででVSCodeとGithubは連携できています)

連携手順➀

VSCodeでリポジトリを開く

連携手順②

Githubへのアクセスを許可する。 Githubのページが開くのでログインしてください。

連携手順③

先ほど作成したGithubのリポジトリを選択する。 見つからない場合はブラウザをいったん更新するか、再度Githubへログインしてください。

連携手順④

Githubのリポジトリにに登録されているファイルが左パネルに表示されていれば成功です。表示されない場合はブラウザをいったん更新するか、再度やり直しして下さい。

5.SalesforceのDeveloper組織を準備する。(Sandboxでも可)(省略)

6.ローカル環境へSalesforce CLIをインストールする。(省略)

7.ローカル環境で上記Salesforce組織を認証する。

  1. 認証
    sfdx auth:web:login
    上記のコマンドをローカルPCで実行する。
    Salesforce CLIをインストール済みの前提です。

  2. 認証情報のコピー
    sfdx force:org:display -u <ログイン組織の別名> --verbose
    認証後、上記のコマンドをローカルPCで実行する。
    表示された以下の部分の「force://PlatformCLI::hogehogehoge」をコピーする。
    sfdx Auth Url force://PlatformCLI::hogehogehoge

8.認証情報をGithubのリポジトリのSecrets項目へ保存する。

  1. 認証情報として「SFDX_AUTH_URL」
  2. Gitへのコミットを行うため、以下の2項目もSecretsに保存する。
    「EMAIL」: GitアカウントのEmailアドレス
    「UNAME」:Gitアカウントのユーザ名

Secrets保存手順➀

➀「Setting」>「Secrets」を開く。 ②「New Repositry Secret」を押す。

Secrets保存手順②

➀「Name」と「Value」を入力する。 ②「Add Secret」を押す。

Secrets保存手順③

入力した項目が保存されていればOK。 入力した内容を後から確認することはできません。 上書きは可能。

9.VScode上で以下の2ファイルを作成してCommitする。

  1. manifest/package.xml
  2. sfdx-project.json

10.Github上で、「Actions」を選択、YAMLを編集して処理を書く。

retrieve.yamlの内容をコピーして保存する。
このWorkflowは、手動で実行します。

Actions編集➀

「set up this workflow」をクリック

Actions編集②

➀ファイル名を「retrieve」。 ②下記の「retrieve.yaml」をコピーペーストする。 ③「Start Commit」を押す。
# 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
retrieve.yaml

 11.Actionを実行してSalesforceのソースを取得する。

Githubのリポジトリから「Actions」→「retrieve」を実行する。
ここまでの設定に漏れがなく正常に終了した場合、SalesforceのソースがGithubに登録されます。
ソースがGitに登録されたら、VSCodeの画面を更新してください。

Actions実行➀

➀Github上で「Actions」を選択する ②「左パネル」から「retrieve」を選択する。

Actions実行②

➀右パネル上で「Run workflow」のプルダウンを押下する。 ②緑色の「Run workflow」ボタンを押下する。

Actions実行③

➀「retrieve」がキューに追加され実行中となる。 ②「×」が出た場合、エラーとなった行のワークフロー名の部分をクリックして詳細を表示していく。 ③どの行でエラーが出たかまで表示されているので確認して必要に応じて修正を実施する。

Actions実行④

エラー画面のサンプルイメージ

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 
deploy.yaml

13.VSCode上でソースを編集してCommit/pushする。

適当な画面を更新してcommitします。
VSCode上でPushすると、Actionsが動作し、Salesforce側へDeployされます。

14.Salesforceにソースが反映されることを確認する。

Salesforce側でソースを更新した画面を確認します。 問題がなければ、更新が反映されているはずです。

 最後に

ここまでで特に問題が起きていなければ、Salesforceのソースがgithubのリポジトリに登録され、編集してコミットした内容がSalesforceに反映されているかと思います。

みなさまの参考になれば幸いです。

34 件
     
  • mitocoで解決!Salesforceでつまずく5つのハードルの乗り越え方
  • Salesforceの保守運用をプロ人材が常駐サポート

関連する記事