🚄

Web App パフォーマンス学習のための準備

3 min read

Introduction

対象者

  • Web App パフォーマンスの勉強したい方

何が嬉しい?

  • パフォーマンス系の学習のためには、最適化するためのアプリを用意する必要がある
    • 用意めんどくさい
    • 紹介しているレポジトリを使うとすぐ学習可能

この記事で行うこと

  • WebApp パフォーマンスの勉強用リポジトリの紹介
  • ついでに、紹介したリポジトリを fork,clone して、heroku でデプロイ

WebApp パフォーマンスの勉強用リポジトリの紹介

https://github.com/CyberAgentHack/web-speed-hackathon-online
  • CyberAgent さんが学生向けに行っているパフォーマンス系の採用イベントで使われたリポジトリ
  • こちらのアプリは、Web アプリのパフォーマンスの勉強のために、わざとパフォーマンスを下げられたアプリのリポジトリ
  • ハッカソンでは、このアプリをグループでチューニングして速さを競い合う。

https://github.com/CyberAgentHack/web-speed-hackathon-online/wiki/Web-Speed-Hackathon-Online-出題のねらいと解説
  • ↑ しかも、解説記事もある!(助かる 🙏)

https://www.cyberagent.co.jp/careers/students/career_event/detail/id=25556
  • ↑ 今年(2021 年)もやるみたいです。参加できる学生は参加してみては?
    募集期日 2/5 までなのでまだ間に合います!

Code の準備

Code のフォーク

https://github.com/CyberAgentHack/web-speed-hackathon-online
Image from Gyazo
こちらのリポジトリをフォークして、自分のリモートリポジトリで遊びましょう

ブランチの作成

master ブランチのままだと、間違えてプルリクしてしまう恐れがあるので、今回は、README に書かれていることを真似て、user/hogehoge の形でブランチを作成して作業します。

Image from Gyazo

# フォークしたブランチのclone
git clone https:.......
# ブランチの作成
git checkout -b user/hogehoge
# リモートにブランチをプッシュしておく
git push origin user/hogehoge

heroku のアカウント持っていない人

こちらのフォームに従って登録

https://signup.heroku.com/login

リポジトリと heroku の連携

heroku でデプロイするためのワークスペースを用意

Image from Gyazo

Image from Gyazo

  • New ボタンで Create New App
    • app の名前設定
    • 地域設定
    • パイプラインは後で追加したい時に追加で ok

GitHub のリモートリポジトリ連携

Image from Gyazo

  • 自身の GitHub のアカウントをつなげる
  • 自身のアカウント内からフォークしたリポジトリを検索
  • connect

自動デプロイの設定

Image from Gyazo

  • デプロイしたいブランチの選択
  • CI をパスしてからデプロイする場合チェック ✅

デプロイコマンドの設定

Image from Gyazo

  • 今回使うリポジトリでは既に用意してくれているため、準備必要なし

デプロイ

手動デプロイ

Image from Gyazo

Image from Gyazo

  • リモートリポジトリのデプロイを手動で行うボタンがあるので、今回は、こちらでデプロイして、アプリを確認

Image from Gyazo

  • 開けました! あとは、ローカルで作業したり、リモートにプッシュして、別デバイスで確認したりして遊びましょう。

https://web.dev/lighthouse-ci/
せっかくデプロイするなら、Lighthouse の CI とか挟むと面白そう ✨

注意

  • 特に有料設定にしていなければ、課金されませんが、リソースがもったいないので、遊び終わったら、停止も忘れずに。

終わりに

  • 今回の記事は、自身の Zenn 記事作成練習,Markdown の練習のために作業ついでに書きました。
  • 練習ついでに、Web App のパフォーマンス系の勉強したい人に届けばいいなと思い書いたので、パフォーマンスの勉強したい方に届いていれば嬉しいです!

Discussion

ログインするとコメントできます