なになれスマートフォン用の表示で見るなになれIT系のことを記録していきます。StackをHeroku上で動かしてみました。Stackアプリに手を加えて、Dockerに対応させます。Dockerにすれば、他の環境への移行も楽になるのではと思います。Stackアプリを動かします。Composeを使って、以下の3つのコンテナで構成します。CLI環境のDockerfileを作ります。CLIをインストールしているだけというシンプルなモノです。Angularアプリ実行用のDockerfileAngularをビルドして、それをそのままDockerコンテナに含めると容量がかなり大きくなってしまいます。そのため、Angularビルドとnginx上でのAngularアプリの実行を分けます。これはDockerのマルチステージビルドの機能を使えば、実現できます。Documentationマルチステージビルドを用いたDockerfileを作ります。--from=build-stageでビルド後の成果物のみをコピーしています。これにより、最小限のファイルサイズになります。AngularでビルドしたHTMLリソースをnginxで動かすDockerコンテナになります。Express実行用のDockerfileExpressを動かすDockerfileを作ります。]Node.jsの環境を公式のイメージから取得して、Expressを動かすだけのDockerコンテナになります。Composeで各コンテナを連携これまでに用意した各Dockerコンテナを連携します。/data/db:/data/dbURLにサービス名を指定することで、各サービスにアクセスすることができます。mongodb://db:27017/my-heroesといった形です。depends_onを指定することで、サービスを立ち上げるために事前に起動が必要なサービスを指定できます。これにより、サービスを起動する順番を制御することができます。環境変数を用いて動的にnginxの設定を変更しています。nginxの公式Dockerイメージにそのやり方が記載されています。configurationという箇所です)https://hub.docker.com/_/nginx/こちらも参考にしました。}}${APP_HOST}と${APP_PORT}が環境変数で定義した値に変わります。Expressのサービス名にアクセスする設定になります。まとめ公式のDockerイメージを活用すれば、プログラムをコピーして、起動コマンドを実行するといった形で、Dockerコンテナ化できるので難しいことはあまりないかなと思います。ハマったら、コンテナのシェルに入ってデバッグするといったことができると良いです。今年を振り返る的な投稿です。今年も色々学べました。Composeによる開発環境の構築(TypeScript,Node.js,Redis,...TypeScriptで作ってみるシリーズの作業ログです。Composeで動かしてみました。»プロフィールid:hi1280日々で得たIT技術を記録していきます。月別アーカイブ関連記事2019年で学んだ技術AngularにおけるLazyLoadingの実現方法メモを共有するWebアプリを作った注目記事はてなブログをはじめよう!hi1280さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。