CAMPHOR- —京都のIT系学生コミュニティ—

セクション区切り

About

CAMPHOR-カンファーは京都のIT系学生コミュニティです。
エンジニアリング・デザイン・プロダクト開発などへの関心を共通点とする、 様々なバックグラウンドを持つ学生が集まっています。

CAMPHOR- HOUSE イメージ画像

CAMPHOR- HOUSE

CAMPHOR-のコミュニティースペースです。誰でも自由に訪れることが可能であり、日頃から作業・相談・議論が行われています。集まることのできる決まった場所があることによって、日頃のメンバー間の交流が促進されています。

創作活動 イメージ画像

メンバー同士の交流

CAMPHOR-にはITに関係する幅広い事柄に興味を持つメンバーが出入りしています。様々なスキルセットやスキルレベルを持つ学生により、教え合いや議論が普段から行われています。

イベント開催 イメージ画像

イベント・勉強会

トークイベントや勉強会を定期的に開催しています。学生が普段の取り組みについて発信し交流するものや、企業のデザイナーやエンジニアに来ていただくものがあります。

セクション区切り

House

学生が気軽に開発やデザインを行うことができる無償のコミュニティスペースです。
各種イベントもこちらで開催されており、様々な人が集まる場所となっています。

CAMPHOR- HOUSE 地図

CAMPHOR- HOUSEカンファーハウス

住所
〒606-8302
京都府京都市左京区吉田牛ノ宮町16番地
最寄駅・バス停
京阪 出町柳駅より徒歩9分
京都市バス 京大正門前より徒歩3分
Maps Schedule
セクション区切り
セクション区切り

Members' blog

CAMPHOR-カンファー運営メンバー個々人が綴るブログ記事を収集して表示しています。
メンバーの得た技術的・学術的・日常的な知見を共有します。

ブログのサムネイル画像
19
Oct.

GitHub Actions を使って AWS S3 に自動デプロイするhttps://honai.me/blog/post/github-actions-aws-s3

パブリックベータになった GitHub Actions を使ってみたので、そのメモ。かなり雑なのはお許しください。 前提 公開したいWebのプロジェクトがあり、yarn build とかで静的に書き出せる状態。 そもそもビルドする必要もない(HTMLファイルとCSSファイルだけ、など)プロジェクトにももちろん使えます。 プロジェクトをGitHubで管理し、GitHubにプッシュした時に自動でビルドとS3へのデプロイ(アップロード)がされるようにします。 S3バケット作成 Amazon S3 での静的ウェブサイトのホスティング - Amazon Simple Storage Service ↑ 概要説明。と各ドキュメントへのリンクが書いてあります。サーバーサイドのスクリプトは実行できない・独自ドメインを設定できる・HTTPS通信をサポートしていない、など、WebサイトをS3で公開するにあたって重要なことも書いてあります。 例: 静的ウェブサイトをセットアップする - Amazon Simple Storage Service ↑ (かなり大雑把な)チュートリアルです。 IAM設定 GitHub Actions からS3のバケット内のファイルを読み書きするには、適切にアクセス許可をする必要があります。 今回は、CLIからAWSサービスにアクセスする「ユーザー」と、アクセス権限が記述された「ポリシー」を作成して、ユーザーにポリシーを結びつけることで、GitHub ActionsからS3の読み書きができるようにします。 ポリシーの作成 AWSコンソールにサインインして、サービスからIdentity and Access Management (IAM)を選びます。「ポリシー」→「ポリシーの作成」。 次の画面では、サービス名などを検索してGUIで権限を設定するか、JSONで設定を直接記述することができます。 s3 syncに必要なアクセス権限 - Qiita 今回はこのサイトを参考に、Deleteの権限も追加して次のようなJSONを設定しました。 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject" ], "Resource": [ "arn:aws:s3:::[バケット名]", "arn:aws:s3:::[バケット名]/*" ] } ] } [バケット名] の部分は先ほど作成したバケットの名前を入れてください。 続く確認画面で、ポリシーの名前を決めて入力し、ポリシーを作成します。 ユーザーの作成と権限付与 同じくIAMの管理画面から「ユーザー」→「ユーザーを追加」 ユーザー名を決めて入力し、「アクセスの種類」は「プログラムによるアクセス」を選びます。続く「アクセス許可の設定」では「既存のポリシーを直接アタッチ」で、先ほど作成したポリシーの名前を検索して適用します。 タグの設定はスキップし、最後にAccess Key ID/Secret Access Keyと、それらが記述されたCSVのダウンロードボタンが表示されるので、コピーするなりダウンロードするなりして必ず控えておきましょう(Secretは2度と表示させることはできませんが、キーのペアを後から作成しなおすことはできます)。S3のバケットの読み書きができるキーペアなので、扱いは慎重に。 GitHub Actionsの設定 Features • GitHub Actions Actionsはベータ機能なので、普通のGitHubアカウントでは有効化されていません。上記のページから申請してください(筆者の場合はSign-upをクリックしてすぐに使えるようになりました)。 シークレットの作成 先ほど控えたIAMユーザーの2つのキー(Access Key ID/Secret Access Key)を、GitHub Action内で使える暗号化された変数として利用します。 GitHub Actionsの仮想環境 - GitHub ヘルプ # シークレット(暗号化された変数)の作成と使用 公開したいプロジェクトのリポジトリの「Settings」→「Secrets」から、2つのキーを登録します。名前は AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY などがわかりやすいと思います。 設定のYAMLを書く 私はJSONに慣れてしまっているので、たまにYAMLを書くと混乱します。プッシュする前にせめて文法だけでも YAMLlint - The YAML Validator などでチェックしておくといいかもしれません。 GitHub Actionsの利点の1つは、デプロイなどのワークフローのすべてを1から記述しなくても、他の開発者が用意した部品(Action)に変数を流し込んで、組み合わせて使うことで、複雑な手順でも簡単に記述できることです。 GitHub Actions に公式(?)のワークフローやスターター、ツールキットがまとまっており、このOrganization内のリポジトリ以外にも、一般ユーザーが作成した部品を使うこともできるようです。 今回は公式の部品から checkout ・ setup-node ・ aws/cli の3つを利用します。 公開したいプロジェクトのルートに .github 、その中に workflows というディレクトリを作り、 deploy-s3.yml など拡張子がymlのファイルを作成します。 Github Actionsのヘルプ や各ActionsのREADMEなどを参考に、次のようなWorkflowの設定を記述しました。 name: Upload to S3 on: push: branches: - master jobs: deploy: name: Build & Deploy runs-on: ubuntu-latest steps: - uses: actions/checkout@master - uses: actions/setup-node@master with: node-version: 10.x - run: yarn install - run: yarn build - uses: actions/aws/cli@master env: AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }} with: args: s3 sync dist/ s3://[作成したバケット名] --delete 2行目の on: はデプロイを走らせるタイミングを記述しています。 master ブランチにプッシュされたときに走るようにしました。 このWorkflowは1つのジョブ deploy (Build & Deploy) から成ります。次の5つのstepを実行します。 masterブランチにチェックアウト nodeの環境をセットアップ yarn install yarn build dist ディレクトリの中身を AWS S3 にアップロード (Sync) ビルド時のコマンドや公開するディレクトリなどは適宜読み替えてください。 AWS CLIのドキュメントのリンクを貼っておきます s3 — AWS CLI 1.16.263 Command Reference まとめ 何となくコピペを組み合わせて書いたYAMLなので、Jobを分割したり名前をちゃんと付けたりしたほうがいいとは思いましたが、とりあえずやりたいことはできました。他の人が作ったワークフローの部品を組み合わせて使えるというのは、GitHubらしいし便利だなと感じました。 記事を読んでくださったみなさんの参考になればうれしいです。
セクション区切り

Events

セクション区切り

Sponsors

CAMPHOR- は、協賛企業・運営企業・個人のご協力によって活動を行っています。
また、私達の活動をご支援いただける企業を随時募集しております。

協賛企業
ピクシブ株式会社

ピクシブ株式会社 ロゴ

協賛企業
株式会社メルカリ

株式会社メルカリ ロゴ

協賛企業
株式会社ディー・エヌ・エー

株式会社ディー・エヌ・エー ロゴ

協賛企業
株式会社 idea spot(イデアスポット)

株式会社 idea spot(イデアスポット) ロゴ

運営企業
株式会社Vi-King

株式会社Vi-King ロゴ

セクション区切り

Contact

CAMPHOR- の見学・取材・協賛などのお問い合わせはこちらからお願いします。
企業の方も学生の方もお気軽にお問い合わせください。
もちろん CAMPHOR- HOUSE に直接お越しいただいても構いません。

セクション区切り

Twitter / Facebook