Herokuデプロイに向けてのフロントエンド設定(Vue.js・Tailwindcss)

久しくブログでのアウトプットを怠っていました。 気持ちを改めて本日からまたできるだけ毎日投稿していこうと思います！

Herokuデプロイで生じた問題

アプリケーション開発で躓いた部分としてHerokuにてデプロイする際に何故かフロントエンドがうまく機能しないという問題が生じました。
その問題が尾を引いてイライラ原因となりましたのでここでアウトプットをしておき、今後はイライラをなくしていきたいと思います。

なぜフロントエンドが機能しないのか？

Yarnで追加したパッケージのバージョンの問題かと考えて、yarn remove 〇〇やyarn add 〇〇ばかりやっていたがこれはどうやら違うようでした。

いろいろ試してみたのですがconfig/webpacker.ymlに問題があるようでした。
私のポートフォリオではWebpackerを使用しているため、全てapp/javascript以下にVueやCSSを読み込むJSファイルなどを配置していました。
そういったJavascriptからCSSを読み込む際にはconfig/webpacker.yml内を以下のように変更する↓
config/webpacker.yml

production:
  <<: *default
~
  extract_css: false
~

※初期設定ではtrueになっている。

zenn.dev

そして以下のコードを追加するとひとまずVueと通常のCSSは起動します。
config/webpack/environment.js

const customConfig = {
  resolve: {
    fallback: {
      dgram: false,
      fs: false,
      net: false,
      tls: false,
      child_process: false
    }
  }
};

environment.config.delete('node.dgram')
environment.config.delete('node.fs')
environment.config.delete('node.net')
environment.config.delete('node.tls')
environment.config.delete('node.child_process')

environment.config.merge(customConfig);

github.com

Tailwindcssを本番環境で使うにはさらに設定が必要

まだここまでではTailwindcssが反映されていないです。 ここでは単純にapp/javascript/packs/tailwind.config.jsに注目します。 app/javascript/packs/tailwind.config.js

module.exports = {
  purge: [
    './app/javascript/pages/*.vue',
    './app/javascript/pages/**/*.vue',
    './app/javascript/pages/**/**/*.vue',
    './app/javascript/pages/*.vue',
    './app/javascript/components/*.vue',,
    './app/javascript/*.vue'
  ],
~

順番はテキトーですがこのようにpurgeの部分でtaiwindcssを反映させたいファイルを指定しないといけません。 このpurgeで指定したファイルのみビルドされるのでここで漏れがあると本番環境でtailwindcssが反映されないので気をつけましょう。

zenn.dev