ofl / entry_point_2019 Goto Github PK

バグレポート

問題の説明

Staging環境でCSPエラーのためページが表示されない現象の修正

参考

• Solving Content Security Policy problems on Vue 2.0 and Rails Webpacker 3.5
• npm run production would not run as production mode, keeps running on development mode · Issue #1429 · JeffreyWay/laravel-mix

再現方法

1. Staging環境にアクセスする

期待される動作

• ページが表示されること

実際の結果

追加 / スクリーンショット

機能要求

資料

• gazay/gon: Your Rails variables in your JS

作業

• gonの導入

完了条件

• gonを利用してVue.jsにサーバー側のデータを渡す

機能要求

資料

• Buefy: lightweight UI components for Vue.js based on Bulma | Buefy
• Feature/25 by ofl · Pull Request #35 · ofl/entry_point_2019
• Nuxt.jsでBuefyを使う | shimar's blog
• https://dansup.github.io/bulma-templates/

作業

• VuetifyからBuefyに切り替える

完了条件

機能要求

資料

• railsconfig/config: Easiest way to add multi-environment yaml settings to Rails, Sinatra, Pandrino and other Ruby projects.
• kpumuk/meta-tags: Search Engine Optimization (SEO) for Ruby on Rails applications.
• Vue + vue-router で動的にページタイトルを変更する方法 - Qiita

作業

• gem config を導入する
• メタタグを出力する
• ページのタイトルを動的に設定可能にする

完了条件

機能要求

資料

• Server-side Pagination with GraphQL & Ruby Tutorial
• 2n it sp. z o.o.
• 雑に始める GraphQL Ruby【class-based API】 - Qiita

作業

• GraphQLでページング可能にする

完了条件

機能要求

資料

作業

• モバイル画面でメニューを表示する

完了条件

機能要求

資料

作業

• デザインテンプレートの適用(#179)
• マルチステップ（複数のフォーム、プレビューなどを経て）で登録可能にする(#179)
• ロジックを単純にするためサーバーサイドのバリデーション失敗時は、すべてのステップのフォームを一画面に表示してエラー個所を表示する。(#179)
• 利用規約に同意しないと登録ボタンを押せないようにする(#180)
• 登録完了後、JWTによってログインして
• 登録完了後、完了画面を表示してXX秒後ホームにリダイレクトする
• アバターの登録

完了条件

• マルチステップでフォームを入力後ユーザーの登録が完了する

バグレポート

問題の説明

CircleCIが動かない

再現方法

1. git push origin

期待される動作

• CircleCIが動作する

実際の結果

追加 / スクリーンショット

機能要求

資料

作業

• 記事を削除する
• 確認のダイアログを表示する

完了条件

機能要求

資料

• Quick Start — Vuetify.js
• Atomic Design by Brad Frost
• Reduxいらないかも？！GraphQL + ReactでReduxを使わずにいい感じに実装した - Qiita
• Vuetify.js でお手軽マテリアルデザイン + Atomic Design「風」のディレクトリ構成 - s平面の左側

作業

• Vuetifyの導入(#35)
• Atomicデザイン風のディレクトリの作成

完了条件

• Vuetifyのコンポーネントを利用したページを表示できること

機能要求

資料

• Vue.js のコンポーネントと親子間データの送受信 | Cubix
• railsのプロジェクトにおけるvueを使った開発手法 - よちよち開発の日々

作業

• Rails通常viewを利用したCRUDの実装
  + [ ] vue componentを利用したCRUDの実装

完了条件

• Vuetifyのフォームを使用してRailsの標準的なCRUDを行う

機能要求

資料

• [Rails 5] rails newで常に使いたい厳選・定番gemリスト（2017年版）
• Rubyエンジニアがおすすめする、開発に役立つ超便利なgem15個 - paiza開発日誌

作業

• [ ]

完了条件

機能要求

資料

作業

• [ ]

完了条件

• GrapphQLでログイン中のユーザーの情報を取得する

機能要求

資料

• Solving Content Security Policy problems on Vue 2.0 and Rails Webpacker 3.5
• npm run production would not run as production mode, keeps running on development mode · Issue #1429 · JeffreyWay/laravel-mix

作業

• production環境で有効にしているunsafe_evalを無効にする

完了条件

機能要求

資料

作業

• 記事の詳細画面にコメントを投稿するフォームを表示する

完了条件

• 記事の詳細画面にコメントを投稿するフォームを表示する

機能要求

資料

作業

• [ ]

完了条件

機能要求

資料

• 紹介 | Vue Router

作業

• Vue Routerを導入する

完了条件

機能要求

資料

作業

• サーバーでのバリデーション結果を表示する

完了条件

機能要求

資料

• コンポーネントの基本 — Vue.js
• Vue.jsとRailsの最適な融合を考える - メドピア開発者ブログ
• rails+vueの開発環境でフォームのpost通信を行う方法 - よちよち開発の日々

作業

• 詳細画面の表示
• 編集画面の表示
• 修正、修正完了の表示
• 新規作成画面の表示
• 作成完了の表示
• 削除

完了条件

• Vueコンポーネントを利用したCRUDが可能なこと

機能要求

資料

• GraphQLの導入 · Issue #141 · ofl/entry_point_2018

• GraphQL - Welcome

• 雑に始める GraphQL Ruby【class-based API】 - Qiita

• graphql-ruby/mutation_errors.md at master · rmosolgo/graphql-ruby

• apollographql/apollo-link-state: ✨ Manage your application's state with Apollo!

• 世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita

• Apollo Client + React 入門 - Qiita

作業

• サーバー側の対応
  + [ ] クライアント側の対応

完了条件

• GraphQLでCRUDが可能になる

機能要求

資料

作業

• [ ]

完了条件

機能要求

資料

• magnusvk/counter_culture: Turbo-charged counter caches for your Rails app.

作業

• Userにavatarを追加
• Articleにコメント数のカウンターキャッシュを追加
• [email protected]を登録する

完了条件

機能要求

資料

• rubocop-hq/rubocop: A Ruby static code analyzer and formatter, based on the community Ruby style guide.
• rubocop-hq/rubocop-rspec: Code style checking for RSpec files

作業

• Gemfileの編集
• bundle install

完了条件

• RuboCopをローカル環境で実行できる

機能要求

資料

作業

• [ ]

完了条件

機能要求

資料

• Server-side Authentication with GraphQL & Ruby Tutorial

作業

• GrapphQLでログイン、ログアウトする

完了条件

機能要求

資料

• railsコマンド(rails) - - Railsドキュメント
• DockerでRails+Webpackerの開発環境を構築するテンプレート - Qiita

作業

• プロジェクトにDockerfile、docker-compose.yml、Gemfile、.envファイルを追加
• docker-compose run --rm rails bundle install
• docker-compose run --rm rails rails new . -STB --skip-turbolinks --database=postgresql
• database.yml の修正
• docker-compose up -d

完了条件

• ローカル環境でRailsを動かす

機能要求

資料

作業

• [ ]

完了条件

機能要求

資料

• Delete in Rails Without jQuery and UJS | Viget

作業

• ログイン、ログアウトを可能にする

完了条件

• ログイン、ログアウトを可能にする

機能要求

資料

• Pagination with fetchMore | Vue Apollo

作業

• [ ]

完了条件

• 記事の表示を「もっと見る」ボタンを押すことで追加する

機能要求

資料

• Hello World - CircleCI

作業

• .circleci/config.yml の追加
• CircleCIのコントロールパネルからプロジェクトを追加
• 環境変数を設定
• バッチを表示

完了条件

• CircleCIでテストが実行される

機能要求

資料

• Home · Sorcery/sorcery Wiki

作業

• メール、パスワードを使用したログイン機能の作成

完了条件

• ユーザーがメールとパスワードで認証可能になること

機能要求

アトミックデザインのレベルを把握しやすいように修正

資料

作業

• Vue Componentのディレクトリ名を修正

完了条件

機能要求

資料

作業

• ログアウト時に確認ダイアログを表示する

完了条件

機能要求

資料

• Installation | Vue Apollo
• GraphQLの導入(Client側) by ofl · Pull Request #151 · ofl/entry_point_2018

作業

• vue.jsからGraphQLを利用可能にする

完了条件

• vue.jsからGraphQLを利用可能にする

機能要求

資料

作業

• キャッシュとサーバーへのリクエストを利用可能する

完了条件

機能要求

資料

作業

• Article
• Comment
• Like
• User

完了条件

• モデルのCRUDが可能になること

機能要求

資料

• Usage in Vue components | Vue Apollo
• GraphQLの導入(Client側) by ofl · Pull Request #151 · ofl/entry_point_2018

作業

• 記事詳細のフォームからコメントを投稿する
• 投稿した記事が表示される

完了条件

• 記事詳細のフォームからコメントを投稿する

機能要求

資料

作業

• 記事詳細画面からお気に入りに登録・解除できること

完了条件

機能要求

資料

• Heroku Pipelineを使ってみる - Qiita
• ofl/entry_point_2018#255
• HerokuにDeployしたタイミングでdb:migrateを実行したい - Qiita
• 既存のHeroku appからpipelineを作成し、CLIからStagingとProductionをいじれるようにする | クリブロ！

作業

• Procfileの追加
• Herokuアプリの作成
  • Productionアプリの作成
    • heroku create --remote production
  • Stagingアプリの作成
    • heroku create XXX-stg --remote staging
  • Pipelineの作成
    • Pipelines | Heroku Dev Center
    • heroku pipelines:create xxx -a example-app (作成)
    • heroku pipelines:add example-pipeline -a example-staging-app (ステージングアプリを追加)
  • 以下コマンドは --remote production(/staging)をつけて実行
  • 環境変数の設定
    • heroku config:set ENV_NAME_1=value1 ENV_NAME_2=value2
  • addons
    • postgres
      • heroku addons:create heroku-postgresql:hobby-dev
  • buildpacks
    • migrationの自動化
      • heroku buildpacks:set https://github.com/heroku/heroku-buildpack-ruby
      • heroku buildpacks:add https://github.com/gunpowderlabs/buildpack-ruby-rake-deploy-tasks
      • heroku config:set DEPLOY_TASKS='db:migrate cache:clear'
• ローカルからデプロイ
  • git push staging ローカルブランチ名:master --force
  • git push production ローカルブランチ名:master --force
  • db:migrate
    • heroku run rake db:migrate --remote staging
• GitHubのマスターをHerokuのStagingに自動デプロイ
  • パイプラインをGitHubに接続
  • Herokuのプロジェクトのデプロイ設定からGitHubの設定を行う
    • GitHubプロジェクトとの接続
    • Automatic deploysの設定
• Review Appsの設定
  • HerokuのプロジェクトのReview Apps設定から設定を行う
    • app.jsonの設定
      • scripts
      • addons
      • buildpacks

完了条件

• GitHubのマスターからHerokuのStagingに自動デプロイする
• Pull RequestからReview Appsにデプロイされる

機能要求

資料

• RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめる - Qiita

作業

• Dockerファイル、docker-composeへの追加
• Laravel Mixのインストール
  • package.jsonではdependenciesに設定すること
• CircleCIでのコンパイル
• Herokuでのコンパイル
  • buildpackにnodeを追加
    • heroku buildpacks:add --index 1 heroku/nodejs --remote production
  • レビューアプリで動かす

完了条件

• vueのコンポーネントを表示できる

機能要求

資料

作業

• [ ]

完了条件

バグレポート

問題の説明

モバイル画面でフォームなどをクリックしようとしても画面の表示より下を押さないとクリックが反応しない

再現方法

1. ログイン画面を開く
2. フォームをクリックする

期待される動作

実際の結果

追加 / スクリーンショット

機能要求

資料

• rspec/rspec-rails: RSpec for Rails-3+

作業

• Rspecのインストール
• テストを追加

完了条件

• ローカル環境でRspecが実行できること

バグレポート

問題の説明

ログインの状態をチェックしているコンテンツで非ログイン時の動作

再現方法

1. 非ログイン状態で記事の詳細を表示する

期待される動作

• 記事の内容が表示されること

実際の結果

追加 / スクリーンショット

機能要求

資料

• Container Registry & Runtime (Docker Deploys) | Heroku Dev Center
• docker-composeでRailsを開発しCircleCI 2.0でテストしてHerokuにdeployする - Qiita
• Heroku pipelineの導入 · Issue #255 · ofl/entry_point_2018
• radiant-fortress-34899-stg · Deploy | Heroku
• Heroku Container Registry & Runtime とは（Heroku Dev Center の私家訳） - Qiita
• Heroku で Docker を使う場合の諸注意 - Qiita
• CircleCI 2.0 でGithubにpushした時herokuにデプロイする - Qiita

作業

• DockerコンテナをHerokuにデプロイする
  • Herokuにアプリ、パイプラインを作成
  • heroku git:remote -a stormy-sierra-25566-stg
  • 環境変数の設定
  • heroku container:push web --recursive --context-path .
  • heroku container:release web
• CircleCIでコンテナをビルドしてHerokuにデプロイ可能にする
  • CircleCIの環境変数にHEROKU_APP_NAME、HEROKU_LOGIN、HEROKU_API_KEY、HEROKU_AUTH_TOKENを追加
  • .circleci/setup_heroku.sh
  • .circleci/config.ymlの修正

完了条件

• CircleCIでコンテナをビルドしてHerokuにデプロイ可能にする

機能要求

資料

作業

• app/assetsの削除

完了条件

• app/assetsを削除して正常に動作する

機能要求

#87

資料

• GraphQLの規格とプロダクトの隙間をどう埋めるか 〜ファイルアップロード〜 - "I" is missing
• GraphQL でファイルをアップロードしたい - esm アジャイル事業部 開発者ブログ
• apollo-client v2 + rails (graphql-ruby) でファイルをアップロードするmutationを作る方法 - Qiita
• apollo + rails(graphqlサーバー)でファイルをアップロードするmutationを作る方法 - Qiita
• VueJS example · Issue #73 · jaydenseric/apollo-upload-client

作業

• avatarをアップロード可能にする

完了条件

機能要求

資料

作業

• 記事にコメントが表示される

完了条件

• 記事にコメントが表示される

機能要求

資料

作業

• Rspecの導入(#7)
• Rubocopの導入(#9)
• CircleCIの環境設定(#11)

完了条件

• CircleCI上でテストを実行できる