はじめに

electron-builderでElectronアプリケーション(Windows)をAWS S3に配信する手順を記載する。

前提(ここでは説明しないこと)

• Electronのアプリを作成している
• yarnをインストール済み
• pipをインストール済み
• AWSのアカウントを取得している
• IAMユーザを作成できる権限を持つIAMユーザがある

環境

• OS: Windows10
• electron 6.0.10
• electron-builder 21.2.0
• yarn 1.19.0
• pip 18.0

手順

electron-builderをインストール(ローカル)

yarn add electron-builder --dev

参考：electron-builder

package.jsonに以下を追加

{
...
  "scripts": {
    ...
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "your.app.id",
    "files": [
      "dist/**/*",
      "public/**/*"
    ],
    "win": {
      "target": "nsis"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
...
}

S3でバケットを作成する(AWS)

アプリを配布するためのバケットを作成する。

• S3のマネジメントコンソールにアクセス
  • https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-1
• バケットを作成する
  • バケット名: 任意(全世界でユニーク)
    • ここではmyapp-publishedとする(実際はこのバケット名ではない)
• 設定
  • バージョニング: 有効
• アクセス権限
  • パブリックアクセスの設定
    • 以下にチェックを入れる(必要に応じて)
      • 任意のパブリックバケットポリシーを介して、バケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックする
      • 新しいパブリックバケットポリシーを介して許可されたバケットとオブジェクトへのパブリックアクセスをブロックする

S3配布用のIAMポリシー・IAMユーザを作成する(AWS)

IAMポリシーの作成

S3の特定のバケットにのみアクセスできるポリシー(権限)を作成する。

• IAMのマネジメントコンソールにアクセス
  • https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/home
• ポリシーの作成
  • ポリシー名: 任意
    • ここではS3MyappPublishBucketAccessとする
• JSONを記載する項目に以下を記載

{
  "Version":"2012-10-17",
  "Statement":[
     {
        "Effect":"Allow",
        "Action":[
           "s3:ListBucket"
        ],
        "Resource":"arn:aws:s3:::myapp-published"
     },
     {
        "Effect":"Allow",
        "Action":[
           "s3:PutObject",
        ],
        "Resource":"arn:aws:s3:::myapp-published/*"
     }
  ]
}

IAMユーザの作成

上記で作成したS3MyappPublishBucketAccessポリシーをアタッチしたIAMユーザを作成する。
myapp-publishedバケットにのみアクセスできるIAMユーザになる。

• IAMのマネジメントコンソールにアクセス
  • https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/home
• ユーザー
• ユーザーを追加
  • ユーザー名: 任意
    • ここではmyapp-publisherとする
  • プログラムによるアクセス
• 既存ポリシーを直接アタッチ
  • S3MyappPublishBucketAccessポリシーを選択

AWS CLIのインストール(ローカル)

AWSをコマンドラインから操作できるようにするために、AWS CLIをインストールする。
AWS CLIのインストールはpipを利用する。

pip3 install awscli --upgrade --user

pipのインストールは以下の記事を参考にした。
pipのインストール方法

これでawsコマンドが使えます。

アクセスキーの取得(AWS)

上記で作成したIAMユーザ(myapp-publisher)のアクセスキーを取得する。

• IAMのマネジメントコンソールにアクセス
  • https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/home
• ユーザー
• myapp-publisherを選択
• 認証情報
• アクセスキーの作成
  • 以下の2つの情報が表示される
    • Access key ID
    • Secret access key

アクセスキーの設定(ローカル)

取得したアクセスキーの設定をする。
aws configureコマンドで設定が可能。

$ aws configure
AWS Access Key ID [None]: XXXXXXXXXXXXXXXXXXXX
AWS Secret Access Key [None]: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Default region name [None]: ap-northeast-1
Default output format [None]:

AWS Access Key IDにAccess key IDを、AWS Secret Access KeyにSecret access keyを設定する。

package.jsonにpublish設定をする

package.jsonのbuildに以下を追加する。

{
  ...
  "build":
   ...
    "publish": {
      "provider": "s3",
      "bucket": "myapp-published"
      "region": "ap-northeast-1"
    }
  }
  ...
}

S3にアプリケーションを配布する

ビルド

yarn build

配信

yarn dist --publish always

確認

S3のバケットに以下のファイルが格納されていることを確認。

• myapp Setup 0.0.1.exe
• myapp Setup 0.0.1.exe.blockmap
• latest.yml

無事に配信できました！

参考資料

• electron-builder
  • Publish
• Windows に AWS CLI をインストールする
• Amazon S3: S3 バケットのオブジェクトへの読み取りおよび書き込みアクセスを許可する