GROWI で画像をアップロードできるようにする (AWS S3の設定)

Tech

概要

GROWI.cloud は App を立ち上げた初期設定のままでは画像などのファイルをアップロードすることができません。画像をアップロードできるようにするには、AWS設定 が必要となります。

今回、 GROWI で画像をアップロードできるように、AWSへの設定を説明したいと思います。

なお、この設定後にアップロードされたファイルは Amazon S3 に保存されます。
GROWI.cloud の利用料金とは別に Amazon S3 の料金がかかります。

ちょっとだけ導入の敷居が高いGROWI

esa.io では、契約後に特に設定することなく記事に画像をアップロードすることができました。
画像アップロードは頻繁に使う機能なので、設定が必要になるのは少々不便です。

GROWI Docsを確認すると、2019/9/20現在 「AWS S3 へのアップロード設定」 は執筆中となっています。これもまた、GROWI.cloud の導入を敷居の高いものにしています。
ファイルのアップロード設定 | GROWI Docs

今後、順次ドキュメントは充実していくと思いますから、今だけの問題だと思います。

ちなみに、GROWI に何も設定せずに画像をアップロードしてみようとすると、このように File uploading is disabled と表示されアップロードできません。

f:id:Aqutam:20190920214426g:plain

設定方法

1. AWSアカウントの準備

AWSアカウントを持っていない場合は、下記からアカウントを作成します。
アカウント作成だけであれば無料です。

AWS アカウント作成の流れ | AWS

作成されたアカウントはrootアカウントになります。
rootアカウントのまま利用するとセキュリティ上の危険性が高いため、下記記事にあるような設定をし、IAMユーザーを使用するようにしましょう。

AWSのアカウント開設後にすべき事をまとめてみた ｜ DevelopersIO

2. S3バケットの作成

アカウント発行後、コンソールにログインします。
「サービスを検索する」検索フィールドに S3 と入力し、選択します。

f:id:Aqutam:20190920225317p:plain

「バケットを作成する」 ボタンをクリックします。
「1. 名前とリージョン」 では下記を設定し、「次へ」ボタンをクリックします。

  • バケット名: 任意の名前をつけます。なお、世界中でユニークな名前である必要があるため、簡単なバケット名は既に他の方に取得されている場合があります。
  • リージョン: 普段 GROWI を利用する場所と地理的に近いリージョンを選ぶことをおすすめします。今回は、 アジアパシフィック (東京) を選択します。

f:id:Aqutam:20190920232217p:plain

「2. オプションの設定」は、必要に応じて設定します。特に設定せず、「次へ」ボタンをクリックしても大丈夫です。

f:id:Aqutam:20190920232746p:plain

「3. アクセス許可の設定」は、下記を設定し、「次へ」ボタンをクリックします。

  • パブリックアクセスをすべてブロック: 下記をチェックします。
    • 任意のアクセスコントロールリスト (ACL) を介して許可されたバケットとオブジェクトへのパブリックアクセスをブロックする
    • 新しいパブリックバケットポリシーを介して許可されたバケットとオブジェクトへのパブリックアクセスをブロックする
    • 任意のパブリックバケットポリシーを介して、バケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックする
  • システムのアクセス許可の管理: Amazon S3 ログ配信グループにこのバケットへの書き込みアクセス権限を付与しない

f:id:Aqutam:20190921014325p:plain f:id:Aqutam:20190920233553p:plain

「4. 確認」では、設定内容を確認し、「バケットを作成」ボタンをクリックします。
S3バケットの一覧に作成されたバケットが追加されます。

f:id:Aqutam:20190920234821p:plain

3. GROWI用IAMユーザーの作成

再度コンソールホーム画面に戻り、IAMを開きます。

f:id:Aqutam:20190920234957p:plain

「ユーザー」をクリックし、「ユーザーを追加」ボタンをクリックします。
下記を設定し、「次のステップ: アクセス権限」ボタンをクリックします。

  • ユーザー名: 任意の名前を設定します。 例) growi-user
  • アクセスの種類: プログラムによるアクセス にのみチェックします。

f:id:Aqutam:20190920235221p:plain

既存のポリシーを直接アタッチ を選択し、 「ポリシーの作成」ボタンをクリックします。

f:id:Aqutam:20190920235840p:plain

「JSON」タブを選択し、下記を貼り付けます。
その際、 Resource の growi-hogehoge-test-bucket の部分は、「2. S3バケットの作成」で設定したバケット名に変更します。

f:id:Aqutam:20190921000523p:plain

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::growi-hogehoge-test-bucket",
                "arn:aws:s3:::growi-hogehoge-test-bucket/*"
            ]
        }
    ]
}

「ポリシーの確認」で、「名前」に任意のポリシー名を設定し、「ポリシーの作成」ボタンをクリックします。

f:id:Aqutam:20190921000837p:plain

先程のユーザーを追加画面に戻り、「ポリシーの作成」ボタンの右にある 更新マーク のボタンをクリックします。
検索フィールドに growi と入力し、一覧に先程作成したポリシー名が表示されたら選択し、「次のステップ: タグ」をクリックします。

f:id:Aqutam:20190921001614p:plain

タグの追加は任意で設定し、「次のステップ: 確認」ボタンをクリックします。

f:id:Aqutam:20190921001808p:plain

確認画面の内容に問題がなければ、「ユーザーの作成」ボタンをクリックします。

f:id:Aqutam:20190921001845p:plain

ユーザーが作成され、 アクセスキー と シークレットアクセスキー が表示されます。 シークレットアクセスキー は「表示」をクリックして確認します。一度この画面を離れると再度確認できなくなります。「.csvのダウンロード」ボタンをクリックして保存しておきましょう。

f:id:Aqutam:20190921002303p:plain

GROWI でのAWS設定

管理 > アプリ設定を開きます。
「AWS設定」セクションで下記を設定し「更新」ボタンをクリックします。

  • リージョン: 「2. S3バケットの作成」で選択したリージョンをリージョンコードで入力します。
    リージョンコードは下記で確認します。
    リージョンとアベイラビリティーゾーン - Amazon Elastic Compute Cloud
    アジアパシフィック (東京) の場合は、 ap-northeast-1 です。
  • カスタムエンドポイント: 今回はS3を利用するため、空欄にします。
  • バケット名: 「2. S3バケットの作成」で入力したバケット名を設定します。
  • Access Key ID: 「3. GROWI用IAMユーザーの作成」で発行された アクセスキーID を設定します。
  • Secret Access Key: 「3. GROWI用IAMユーザーの作成」で発行された シークレットアクセスキー を設定します。

f:id:Aqutam:20190921003009p:plain

下記メッセージが表示されたら、設定を保存成功です。

f:id:Aqutam:20190921003047p:plain

アップロードを試す

「作成」ボタンをクリックし、任意のページ名を付け、エディタ領域に画像をドラッグアンドドロップします。
正しく設定されると、記事に画像が埋め込まれます。

f:id:Aqutam:20190921020249g:plain

以上でAWSの設定が完了し、画像などのファイルをアップロードできるようになりました。