Note初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)create-react-appを使わないでReactの開発環境を構築する方法を紹介します。はじめに近年のJavaScriptフレームワークはCLIを使ってワン・コマンドで設定できるようになっています。Reactではそのためのコマンドとしてcreate-react-appが提供されています。creat-react-appは簡単にReactを設定できる反面、設定が隠蔽されてしまい、細かい設定をするためにはejectする羽目になります。ejectをしてしまえば最後、create-react-appがアップデートされてもアップデートできなくなってしまいます。プロダクションなどで設定を細かく設定して管理したい場合はどうすればよいでしょうか?そういう人は自分でゼロから設定しましょう。いうことで、今回はcreate-react-appを使わないで、Reactの開発環境を構築していきましょう。Reactの開発環境の構築方法それでは、Reactの設定をしましょう。以下の設定が完了している必要があります。NodeJSがインストールされていることYarnがインストールされていることDockerがインストールしていること詳しくは、「環境」を参照して下さい。ベースの作成とパッケージのインストール必要なフォルダおよびファイルを作成し、必要なパッケージをインストールします。}...準備ができました。設定を書くそれでは、ファイルの中身を書いていきましょう。expect(appComponent.length).toBe(1);});完成です。今回のWebpackの設定は開発用とプロダクション用で分けていませんが、実際には分けて作り、webpack-mergeなどを使って共通化すると良いでしょう。今回のJestの設定は公式ドキュメントの通りにしてあります。EslintやPrettierもプロジェクトのスタイリングルールに応じて設定した方が良いでしょう。動作確認まずは開発環境を起動してみましょう。successfully.ブラウザで「localhost:3000」が表示されます。カウンターの動作確認もしてみましょう。次に、テスト実行してみましょう。7.68s.テストもパスしました。最後に、ビルドしてみましょう。main.babca1870d3e34b4c183.jsビルドも成功しました。これで、Reactの設定は完了しました。Docker化する方法それでは、Docker上で起動するようにしていきましょう。必要なファイルを作成します。docker-compose.yml設定を書くDockerの設定を書きましょう。.:/app完成です。FlowはAlpine上で実行する際に問題があり、こちらにissueが発行されています。結局、glibcを入れるか、flowのバイナリーを入れるかで対処する必要があり、今回は前者にしました。動作確認Dockerで起動できるか確認してみましょう。0.0.0.0:3000->3000/tcpブラウザで「localhost:3000」を開けば、正しく表示されます。これでDocker化まで完了しました。おまけさらに、Webpackに開発用の設定を追加していきましょう。画像などのアセットを読み込むための設定を追加します。画像をWebpackで利用するには、url-loaderおよびfile-loaderのローダーを追加します。},...}「url-loader」でファイルをbase64に変換してCSSに埋め込みます。ファイルのサイズがリミットを超える場合は「file-loader」でファイルをそのまま読み込みます。base64はファイルを都度読み込む必要がないのでページの読み込みを早くできますが、常にファイルをそのまま扱いたい場合は「file-loader」だけで良いです。古いブラウザに対応するために、BabelにPolyfillを追加しましょう。]}@babel/polyfillはBabelの7.4.0から非推奨になっています。上記の設定で、必要なPolyfillだけをcorejsからインポートして使われるようになります。詳しくは、公式ドキュメントを参照して下さい。Replacement)の設定方法webpack-dev-serverでは、デフォルトでdevServer.inlineが有効になっており、ライブリロードが実行されます。ライブリロードはソースコードを修正するたびにブラウザをリロードする機能ですが、一つのコンポーネントを修正するたびにブラウザをリロードするのは効率がよくありません。Replacement)を有効することで、リロードすることなく、修正したコンポーネントだけ更新するようにしましょう。],...};devServer.hotを有効にし、かつ、HotModuleReplacementPluginを設定しました。起動してみると、以下のようにHMRが有効になっていることが分かります。react-hot-loaderの設定方法Stateを保持したままコンポーネントの修正を反映するために、react-hot-loaderおよび@hot-loader/react-domを設定しましょう。hot(App);最後にいかがでしたか?これでcreate-react-appに頼ることなく、自分でReactを設定できるようになったことでしょう。(NodeJS&Docker編)Jenkinsに入門したいエンジニア向けにこのブログの記事の中から厳選した爆速で学べる記事を紹介します。はじめにJenkinsはDevOpsに欠かせない継続的インテグレーション(CI)や継続的デプロイ(CD)を実現するための専用ツールです。自前でサーバーを用意してCI/CD環境を構築する場合はこれ一択と言ってよいでしょう。この使い方を学べば、開発したアプリケーションのCI/CD環境を自分で構築できるようになります。それでは、ブートキャンプを始めましょう。カリキュラムJennkinsのインストールから基本的な使い方、メールやSlack通知、GitHubアカウント統合までを学ぶカリキュラムです。~最後にいかがでしたか?このカリキュラムを完遂したなら、Jenkinsをマスターできたに違いありません。これであなたも立派なDevOpsエンジニアの仲間入りですね!それでは。Composeを使って手軽に構築する方法を紹介します。はじめに開発環境構築はDockerで構築するのがもっと簡単です。アプリケーションの開発のためにはローカル環境にデータベースを迅速に準備する必要があります。Composeを使って、MySQL、PostgreSQL、MongoDBのデータベースを対象に、データベースを構築し、シードを準備する方法を紹介します。以下の準備が事前に完了している必要があります。Dockerがインストールされていること詳しくは「環境」を参照してください。Composeによる設定とシードの追加まずは、MySQLの設定方法です。必要なフォルダとファイルを作成します。Composeの設定ファイルとシードを入れいる簡単なSQLを作成します。'mask@developer.com');動作確認それでは、Docker上でMySQLを起動してみましょう。exitByeOKですね。次に「http://localhost:8080/」にアクセスしてPhpMyAdminが動いていることも確認してみましょう。次に、PostgreSQLの設定方法です。必要なフォルダとファイルを作成します。Composeの設定ファイルとシードを入れいる簡単なSQLを作成します。'mask@developer.com');動作確認それでは、Docker上でPostgreSQLを起動してみましょう。次に「http://localhost:8080/」にアクセスしてpgAdminが動いていることも確認してみましょう。起動は問題なかったので、「新しいサーバを追加」からデータベースに接続します。ホスト名、ポート番号、ユーザ名、パスワードを入力して、「保存」をクリックします。データベースを選択して、ユーザを表示してみます。シードもちゃんと入っていますね。今回はpgAdminのデータもボリュームに保存しているので、一旦接続情報を入力しておけば、Dockerを停止しても接続情報は保持されます。最後に、MongoDBの設定方法です。必要なフォルダとファイルを作成します。Composeの設定ファイルとシードとなるJSONファイルを作成します。}]動作確認それでは、Docker上でMongoDBを起動してみましょう。Expressが動いていることも確認してみましょう。データも入っていますね。Composeの設定を自動生成できます。Composeの設定ファイルとスキーマとシードのGraphQLファイルを作成します。mysql:「rawAccess」と「migrations」をfalseにするのと、MySQLのポートの開放をします。}}動作確認それでは、Docker上でPrismaを起動してみましょう。exitBye次に「http://localhost:4466/」にアクセスしてGraphQLで確認してみましょう。admin」を実行するか、または「http://localhost:4466/_admin」にアクセスしてAdminページで確認してみましょう。こちらも問題ないですね。Composeでローカルに開発用のデータベースを簡単に構築できるようになったことでしょう。AuthorKeid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。