LoginSignup
3
1

More than 3 years have passed since last update.

Create-react-appのindex.htmlで条件分岐してmetaタグなどを入れる

Posted at

Create-react-appで環境毎にhtmlタグを変えたい時のメモ

本番環境と開発環境でmetaタグを変えたかった(開発環境にnoindexを入れたかった)ので、調べてみたらejsのテンプレートに対応してるみたいです。

参考:Conditional content in index.html

ejsの文法

参考:ejs.co

とりあえず<% %>で囲った中はjs書いていいみたいです。変数をそのまま出力するときは<%=何でしょうか。今後使う時が来たら調べてみます。

index.html
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

結論

自分は下記metaタグ入れたかっただけなので、結論こう書きました。環境変数とかもよく分かってないのでもっとちゃんとしたやり方あるかもしれないです。

ビルド時に本番環境サイトはREACT_APP_ENVにprod、開発環境サイトはREACT_APP_ENVにdevと入れています。

<meta name="robots" content="noindex" />
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- headに入れてるタグ色々 -->
    <% if(process.env.REACT_APP_ENV === "dev") { %>
    <meta name="robots" content="noindex" />
    <% } %>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1