ShareIT-api

IT に関する情報共有サイト

ニュースや記事などで得た IT に関する知見、プログラミングでインプットした内容やエラーの解決法などをメモとして、ツイート感覚で投稿し共有することが出来るサイトです。
主にちょっとしたメモ程度で、投稿する敷居が低いものなので、アウトプットの場としてぜひ使ってみて下さい！
ShareIT

アーキテクチャ

主な機能

• 記事とそれに関するトピックのラベルを付けて投稿 ✍️
• 投稿された記事に対してのコメント 📝、いいね ❤️
• 記事に付けられたコメントといいねの通知(push 通知は未実装 🙅‍♂️)
• ユーザとトピックを指定した検索機能 🔍

実際にローカルで動かしてみる場合

Git , Docker, Docker compose がインストールされてる前提で進めていきます。

手順

1. GitHub のリポジトリから git clone する
2. Amazon S3 でユーザのアイコンを保存するための設定
3. 環境設定ファイルへの記述
4. Docker compose で起動

1. GitHub のリポジトリから git clone する(本リポジトリのではなく別のリポジトリのを clone)

$ git clone https://github.com/mimaken3/ShareIT-docker-dev

clone したディレクトリに移動

$ cd ShareIT-docker-dev

2. Amazon S3 でユーザのアイコンを保存するための設定

1. まずは S3 へログインまたはサインインして下さい。

2. 次に S3 のコンソールページへ移動して、バケットを作成する ボタンをクリックすると
   名前とリージョンタブが開かれるので以下のように入力

   • バケット名はユニークな名前を入力
   • リージョンはアジアパシフィック（東京）
   • 既存のバケットから設定をコピーは何もしない
   • 次ヘボタンをクリック

3. 次にオプションの設定タブが開かれますが、こちらは特に何も入力、設定せずに次へボタンを押す

4. アクセス許可の設定タブが開かれるので以下のように設定

   • パブリックアクセスをすべてブロックのチェックを外し、
     現在の設定により、このバケットと中のオブジェクトがパブリックになる可能性があることを了承します。にチェックを入れる。
     ※注意 オブジェクトが公開される状態になるので、ShareIT のローカル動作が終わったらバケットを削除するか、
     パブリックアクセスをすべてブロックに変更するようにして下さい。
   • 次ヘボタンをクリック

5. 確認タブが開かれるのでバケットを作成ボタンをクリック

6. バケット一覧に先程作成したバケットが表示されるので、そのバケットをダブルクリックして移動。

7. フォルダを作成ボタンをクリックしusers-iconsという名前でフォルダ名を入力し保存ボタンをクリック。

8. フォルダが作成されたので、ダブルクリックしてそのフォルダに移動。

9. ユーザの初期アイコンを以下のようにしてアップロード

   • Google 検索で初期アイコンで使えそうな画像を探してをdefault.pngという名前でローカル（自分の PC）に保存
   • users-iconsフォルダでアップロードボタンをクリックしてファイルを追加、保存した画像を選択し、アップロードボタンをクリック。

10. CORSの設定を行います。

    • アクセス権限タブにあるCORSの設定をクリック
    • CORS 構成エディタが開かれるので下記を記述

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>

11. 次にアクセスキーを取得します。こちらを参考にしてアクセスキーIDとシークレットアクセスキーを取得。

3. 環境設定ファイルへの記述

S3 の情報を Golang(API サーバ用), React.js(AP サーバ用)の環境設定ファイルにそれぞれ記述します。

• ShareIT-docker-dev/docker/react-front/.env/にあるdev.jsファイルを開きます。

先程と同様、バケット名とアクセスキーを下記のダブルクオート内にそれぞれ記述。

AWS_S3_ACCESS_KEY_ID: "",
AWS_S3_SECRET_ACCESS_KEY: "",
AWS_S3_BUCKET_NAME: "",

• ShareIT-docker-dev/docker/golang/にある.envファイルを開きます。

手順 3 のステップ 2 で作成したバケット名、ステップ 11 で取得したアクセスキーを下記にダブルクオートなしでそれぞれ記述。また、SECRET_KEY には任意の文字列を入力。

AWS_S3_ACCESS_KEY_ID =
AWS_S3_SECRET_ACCESS_KEY =
DEV_BUCKET_NAME =
SECRET_KEY =

4. Docker compose で起動

Docker compose を使って Go 、React 、MySQL コンテナを立ち上げます。
(docker-compose は docker-compose.yml と同じ階層、つまり git clone した ShareIT-docker-dev ディレクトリ配下で行います。)

$ docker-compose build

※ 初回ビルドは PC のスペックやネットワーク環境にもよりますが 20〜30 分ほどかかります。

ビルドが完了したら起動します。

$ docker-compose up

Go, React はそれぞれ以下のように表示されたら起動が完了したことになります。
(MySQL のプロセスが起動したあとに Go のプロセスが起動するようになっているため、確認するのは Go と React のみ)

Go

React

これで起動出来ました 🎉
http://localhost:8088 にアクセスすると以下の様なログイン画面に飛ぶはずです。

ちなみに、MySQL コンテナの起動時に、180 個ほどのトピックと admin ユーザのデータがインサートされています。
なので管理者としてログインしたい場合は、
ユーザ名: admin
パスワード: password
でログイン出来ます。

コードを変更する場合、 Go, React 共にfreshとwebpackでホットリロードが効いているので、
ファイルを保存したら自動でブラウザに反映されます。

使い終わったら Ctrl+C で止めます。

削除

今回インストールしたコンテナ、イメージ、ボリューム、ネットワークを削除する場合は、

$ docker-compose down --rmi all --volumes

で一括で全削除出来ます。 以下参考
https://qiita.com/suin/items/19d65e191b96a0079417

最後に

まだまだ足りない実装や課題点などありますので、少しずつ改善していくつもりです。
また、フロント側(React)でのバグや質問、追加実装などございましたらこちらのリポジトリに、
サーバ側(Go)の場合こちらのリポジトリに issue を立てていただければ幸いです 🙇‍♂️

では！