メドピアのRailsフロントエンド環境構築用レポジトリ
Branch: master
Clone or download
pipopotamasu Merge pull request #27 from medpeer-inc/fix_image_plugin
イメージのビルド方法を変更
Latest commit 4684647 Feb 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci image変更漏れ Feb 7, 2019
app イメージのビルド方法を変更 Feb 8, 2019
bin initial commit Nov 14, 2018
config 無駄なfreezeを削除 Jan 17, 2019
db initial commit Nov 14, 2018
lib initial commit Nov 14, 2018
log initial commit Nov 14, 2018
public initial commit Nov 14, 2018
spec 諸々修正 Jan 15, 2019
storage initial commit Nov 14, 2018
tmp initial commit Nov 14, 2018
vendor initial commit Nov 14, 2018
.eslintrc.json add tab setting Feb 8, 2019
.gitignore add ignore Nov 28, 2018
.rspec spec Nov 14, 2018
.stylelintrc.json stylelint Nov 17, 2018
Gemfile update ruby Feb 7, 2019
Gemfile.lock rubyのバージョン変えた Feb 7, 2019
LICENSE add LICENSE Jan 15, 2019
README.md イメージのビルド方法を変更 Feb 8, 2019
Rakefile initial commit Nov 14, 2018
config.ru initial commit Nov 14, 2018
package.json update dependencies Feb 1, 2019
template.rb setting vue and write readme (#23) Dec 3, 2018
webpack.common.js add extensions Jan 15, 2019
webpack.dev.js webpack-dev-server setting with http Jan 16, 2019
webpack.prod.js split webpack config Nov 28, 2018
yarn.lock update dependencies Feb 1, 2019

README.md

目次

これは何か?

Railsとwebpackを統合したテンプレートです(not webpacker)。 メドピアのフロントエンド開発で最低限必要になる(と思われる)ものを入れてあります。 各部署・プロジェクトのrailsレポジトリに適用する場合は以下を参考にしてください。

どうやって適用すればいいのか?

手段1: アプリケーションテンプレートを使用する

推奨方法です。 まずこのレポジトリをローカルにcloneしてください。

$ mkdir tmp
$ cd tmp
$ git clone https://github.com/medpeer-inc/medpacker.git

次に適用対象のレポジトリに移動し、アプリケーションテンプレートのコマンドを打ってください。

$ cd path/to/target-repo
$ bin/rails app:template LOCATION=path/to/tmp/medpacker/template.rb

あとはCLIの指示に従ってください。

手段2: このレポジトリを複製する

楽な方法ですが、まだrails newしていない段階からしか使えません。cloneしてからremoteの向き先変えてpushしてください。

注) Railsや依存gemのバージョンが古すぎないか確認してください(一応定期的にgemやnpmのバージョンは上げていくつもりです)。 → 月に1回npmパッケージとgemのバージョンあげてます。

手段3: 手動で移植する

この差分を人力で移植してください。30分あれば終わると思います。

SSL(HTTPS)環境下でのwebpack-dev-server設定

おそらくほとんどのプロジェクトでオレオレ証明書を用いたエセSSL環境下で開発環境を構築すると思います。 その場合、初期状態ではwebpack-dev-serverは動きません。以下の方法で対応する必要があります。

webpack-dev-serverのpublicオプションの設定

以下のオプションに、開発環境下のドメインを設定してください。
ex) ドメインがhoge.testなら、hoge.testと設定してください。

https://github.com/medpeer-inc/medpacker/blob/master/webpack.dev.js#L9

nginxでhttpsのリクエストをプロキシする

server {
  listen 443 ssl;
  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     nginx setting
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  location /sockjs-node {
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass http://host_name:3035;
  }
}

ここまでできたら、webpack-dev-serverが正常に動くか確認してみてください。 正常に動かなかったらお近くのフロントエンドエンジニアに聞いてみてください。

どうやって使えばいいのか?

ざっくり編

ざっくりした使い方は以下ファイルを見て貰えるとざっくりわかると思います。

https://github.com/medpeer-inc/medpacker/blob/master/app/views/layouts/application.html.erb
https://github.com/medpeer-inc/medpacker/blob/master/app/views/home/index.html.erb
https://github.com/medpeer-inc/medpacker/blob/master/app/bundles/javascripts/entries/application.js
https://github.com/medpeer-inc/medpacker/blob/master/app/bundles/javascripts/entries/home/index.js
https://github.com/medpeer-inc/medpacker/blob/master/package.json

詳細編

npm scripts

$ yarn run dev            # webpackのdevelopmentモードでビルドします
$ yarn run dev:watch      # webpackのdevelopmentモードでビルドします(watchビルド)
$ yarn run dev:server     # webpack-dev-serverを起動します。オートリロードやHMRが効くようになります
$ yarn run build          # webpackのproductionモードでビルドします
$ yarn run eslint         # eslint
$ yarn run eslint:fix     # eslint自動修正モード
$ yarn run stylelint      # cssのlint
$ yarn run stylelint:fix  # cssのlint自動修正モード

jsの読み込み

ディレクトリ構成

app/
  └ bundles/
    └ javascripts/
      ├ entries/     # エントリーポイントとなるjsを置く場所
        └ ...
      ├ modules/     # 機能毎に分割されたjsを置く場所
        └ ...
      ├ components/  # Vue.jsのコンポーネントを置く場所。Vue.jsを使わない場合はディレクトリを削除してください
        └ ...
      ├ plugins/     # Vue.jsのプラグインを置く場所。Vue.jsを使わない場合はディレクトリを削除してください
        └ ...
      ├ directives/  # Vue.jsのカスタムディレクティブを置く場所。Vue.jsを使わない場合はディレクトリを削除してください
        └ ...
      └ store/       # Vue.jsのstoreを置く場所。Vue.jsを使わない場合はディレクトリを削除してください
        └ ...

application.js

application.jsは全ページ共通で使用するjsを書く場所です。デフォルトで読み込んであります。

エントリーポイントのjs

各ページ毎に読み込むjsはapp/bundles/javascripts/entries下に設置して、javascript_bundle_tagで読み込んでください。 例えば、app/bundles/javascripts/entries/home/index.jsは以下のようにして読み込むことができます。

# app/views/home/index.html.erb

<% content_for :bundle_js do %>
  <%= javascript_bundle_tag 'home/index' %>
<% end %>

<div class="container">
  ...何かしらのhtml
</div>

ここで注意して欲しいのが、必ずcontent_for :bundel_jsを使用してほしい点です。 これによるアセットの設定先はheadタグの最後になります。 もしこれを用いない場合、上手くjsが動作しない・画面の描画が遅くなると言った不具合が生じます。

cssの読み込み

ディレクトリ構成

app/
  └ bundles/
    └ stylesheets/
      valiables.scss # 変数を置く
      ├ entries/     # エントリーポイントで読み込むscssを置く場所
        └ ...
      ├ components/  # scssのコンポーネントを置く
        └ ...
      └ mixin/       # scssのミックスインを置く
        └ ...

プロジェクト毎に適宜ディレクトリ切ってください。

application.scss

application.scssは全ページ共通で使用するcssを書く場所です。デフォルトで読み込んであります。

エントリーポイントのcss

各ページ毎に読み込むcssはapp/bundles/stylesheets/entries下に配置して、jsのエントリーポイントにてimportしてください。 さらにstylesheet_bundle_tagで読み込んでください。 例えばapp/bundles/stylesheets/entries/home/index.scssというファイルは以下のように読み込むことができます。

# app/bundles/javascripts/entries/home/index.js
import '@style/entries/entries/home/index.scss'

# app/views/home/index.html.erb
<% content_for :bundle_css do %>
  <%= stylesheet_bundle_tag 'home/index' %>
<% end %>

<div class="container">
  ...何かしらのhtml
</div>

jsと同様に、必ずcontent_for :bundel_cssを使用してください。 これによるアセットの設定先はheadタグになります。 繰り返しますが、必ずjsのエントリーポイントにてscssのファイルをimportしてください。 そうしないとwebpackがscssをビルドしてくれず、stylesheet_bundle_tagの実行時にcssが読み込まれずエラーが起きます。

画像の読み込み

もしimageタグで画像を読み込みたい場合は、以下のようにする必要があります(cssのbackground-imageで読み込む場合は以下を実施する必要はありません)。

jsファイルに画像ファイルをimport

app/bundles/javascripts/entries/image.jsに読み込みたい画像をimportしてください。 例えば以下のように

# app/bundles/javascripts/entries/image.js
import './webpack-logo.svg';

image_bundle_tagを使って、erbファイルに画像を埋め込む

こんな感じで、image_bundle_tagを使うことで指定した画像ファイルのimgタグを出力することができます。

何が入っているか?

このレポジトリに導入されている主要なライブラリや機能を紹介します。

webpack/webpack-dev-server

このレポジトリのキモです。フロントエンドのアセットをビルドするために使っています。

webpack

js, css, 画像ファイルをビルドします。ビルドしたファイルはpublic/bundles以下に出力します。 webpackでビルドしたファイルは、このヘルパーで定義されているメソッドで読み込むことができます。

ビルドには、developmentモードによるビルドとproductionモードによるビルドの2種類があります。

developmentモード

その名の通り、開発時に使用するモードです。

$ yarn run dev
$ yarn run dev:watch
$ yarn run dev:server

上記3つのコマンドはdevelopmentモードになります。 本モードの特徴としては、ビルドされたアセットが圧縮されない・ソースマップが出力されるなど、開発時のデバッグがやりやすいようになっています。

productionモード

その名の通り、本番環境で使用するアセットをビルドするためのモードになります。

$ yarn run build

上記のコマンドはproductionモードになります。 本モードの特徴は、出力されるファイルの大きさを極力小さくするということです。 developtmentモードと違い、ビルドされたアセットが圧縮される・ソースマップが出力されないなど、デバッグはやりにくいですが、ファイルが小さいためより高速にクライアントがアセット取得できます。

webpack-dev-server

また、通常のwebpackの他にwebpack-dev-serverを導入しています。 これはwebpackの開発をサポートするツールです。 例えば...

  • JSを変更した時差分のビルドをしてくれる(webpackのwatchと同じ)
  • リロードせずに更新したファイルがブラウザに適用される(Hot module replacement, HMR)
  • 上記のHMRができない場合は自動的にブラウザをリロードし、更新分のアセットを取得する

という機能が使えます。是非使ってみてください。

ただwebpack-dev-serverですがdocker上で動かす場合、dockerの設定とwebpack-dev-serverの設定(hostやportあたり)を調整する必要がある場合があります。 webpack-dev-server側は以下のファイルを修正する必要があるかもしれません。

https://github.com/medpeer-inc/medpacker/blob/master/webpack.dev.js#L8
https://github.com/medpeer-inc/medpacker/blob/master/config/dev_server_proxy.rb
https://github.com/medpeer-inc/medpacker/blob/master/config/environments/development.rb#L64

babel系

jsを色々なブラウザで読み込めるように(例えば最新の記法が古いブラウザでも読み込めるように)変形/代替してくれるライブラリになります。 すでに設定済みなので、IE11とか気にせずにjsを書いても問題ありません。

このレポジトリのbabel変換における対象ブラウザ設定では、medpeer.jpの推奨環境より多少緩く設定しています。 https://github.com/medpeer-inc/medpacker/blob/master/webpack.common.js#L30

もし自分で設定したいよという場合は以下2つのサイトを参考に設定してみてください(やり方がよくわからないという場合はお近くのフロントエンドエンジニアまで)。

lint系

jsとcssのlintを設定しています。

eslint

app/bundles/javascripts配下のjs及び単一ファイルコンポーネントファイル(.vue)をlint対象にしています。 yarn run eslintで実行できます。もし自動修正してほしい場合はyarn run eslint:fixを実行してください。

stylelint

app/bundles/stylesheets及びapp/bundles/javascripts/components配下のscss(Vue.jsの単一ファイルコンポーネント内部のscssを含む)をlint対象にしています。 yarn run eslintで実行できます。もし自動修正してほしい場合はyarn run eslint:fixを実行してください。

postcss

postcssとはcssに対して何かしらの処理を付与するためのツールです。 現状では以下2つのpostcssのツール(プラグイン)を入れています。 デザイナーとマークアップエンジニアが幸せになる系のプラグインを入れてあります。

autoprefixer

自動的にベンダープレフィックスを付与してくれる。

postcss-flexbugs-fixes

IE11のflexboxのバグを考慮したcssを出力してくれるツール。 なので、cssでflexboxを書く時はIE11のバグを気にせず書いても大丈夫です。

Vue.js

デフォルトで入れておきました。 Vue.js以外を入れたい場合(jQuery, React, Angular等)はお近くのフロントエンドエンジニアまで相談してください。 そもそも「フレームワークいらねーよ」という方はVue.js周りの設定を剥ぎ取った上で、package.jsonからvueを削除してください(やり方がわからなかったらお近くのフロントエンドエンジニアまで)。

axios

ajaxしたい時はaxiosを使ってください。くれぐれも$.ajaxを使いたいという理由だけでjQueryを入れるのはやめましょう。

Q&A

jQueryは入れないの?

最近のjsはjQueryがなくても便利にDOM操作できるようになってきているので入れていないです。 どうしても入れたい場合はお近くのフロントエンドエンジニアまで相談してください。

assets pipeline使わないの?

assets pipelineの特性上、全てのjs, cssをそれぞれ1ファイルにまとめます。 プロジェクトが大きくなると一つにまとめたjs, cssのサイズが膨大になりキャッシュが効いていない状態ではダウンロードに時間がかかってしまいます。 またjs, cssのビルドもgemと密結合するので、小回りの効いた設定がやりづらいといった問題もあります。

そのためassets pipelineは外してあります。

webpackerはどうよ?

いつまでたってもwebpack3系依存が抜けない(つまりwebpackのバージョンアップにwebpackerがついていけていない)のでwebpackerは諦めました(やっと4系出そうですね)。 webpackが昔のバージョンのままだと、依存関係がめんどくさくなるのでもうwebpacker捨てちまおうという判断です。

remote: trueでajaxが動かないんだけど...

以下をコメントアウトしてください。
https://github.com/medpeer-inc/medpacker/blob/master/app/bundles/javascripts/entries/application.js#L3

注意点

  • npmコマンドでパッケージを追加しないでください。yarnでやってください。

LICENSE

This software is released under the MIT License, see the license file.