Reactで作成した画面からExpressで作成したAPIを呼び、取得したデータを画面表示するところまでを構築していきます。 React/Expressはそれぞれ別のDockerコンテナで動作させます。 ディレクトリ app/ 　├── docker/ 　│ ├── docker-compose.yml 　│ └── Dockerfile 　├── backend/ 　└── frontend/ docker/ の2ファイルはホスト側で作成しますが、その他の backend/ と frontend/ 内のファイルは全てコンテナ側で作成していきます。 Docker Dockerfile と docker-compose.yml を作成し、コンテナを起動します。 ファイル作成 React、Express で共通で使う Dockerfile を1つ作成します。 Dockerfile FROM node:14 今回はひとまずnodeが動けば良いので何も設定していません。 次に docker-compose.yml を作成します。 docker-compose.yml version: '3' networks: react_express: driver: bridge services: frontend: # React用のコンテナ build: . container_name: front tty: true volumes: - ../frontend:/frontend working_dir: "/frontend" ports: - 3001:3000 networks: - react_express backend: # Express用のコンテナ build: . container_name: back tty: true volumes: - ../backend:/backend working_dir: "/backend" ports: - 3002:3000 networks: - react_express network : 2つのコンテナを同じネットワーク内に配置します。 volumes : 開発の便宜上、ホストとコンテナでファイル共有しています。 ports : frontend、backendの各サーバ用のポート 3000 を、それぞれホストのポート 3001、3002 に転送しています。 コンテナの起動 コンテナを起動します。 $ cd docker/ $ docker-compose up -d ... $ docker-compose ps back docker-entrypoint.sh node Up 0.0.0.0:3002->3000/tcp,:::3002->3000/tcp front docker-entrypoint.sh node Up 0.0.0.0:3001->3000/tcp,:::3001->3000/tcp UpとなっていればOKです。 Express (Backend) プロジェクト作成 docker exec を使って、Express用のコンテナ (back) に入ります。 $ docker exec -u node -it back /bin/bash package.json を作成します。 $ npm init -y Expressをインストールします。 $ npm install express APIの作成 index.js を作成します。 index.js const express = require('express'); const app = express(); const port = 3000; app.get('/user', (req, res) => { res.json([{ id: 1, name: "Taro" }, { id: 2, name: "Jiro" }]); }); app.listen(port, () => console.log(`Server running on port ${port}`)); /user にリクエストが来たときに、jsonデータを返すようにしています。 Expressサーバの起動 準備ができたので、Expressサーバを起動します。 $ node index.js Server running on port 3000 React (Frontend) プロジェクト作成 別のターミナルを立ち上げ、docker exec を使って、React用のコンテナ (front) に入ります。 $ docker exec -u node -it front /bin/bash create-react-app コマンドを使って、プロジェクトを作成します。 （ドットを付けることで、ディレクトリ直下に作成できます） $ npx create-react-app . Proxyの設定 Dockerのネットワーク環境における Front/Backend の各オリジン ( http://xxx:yy )は、 Frontend : http://frontend:3000 Backend : http://backend:3000 のように異なるため、CORS (Cross-Origin Resource Sharing) の設定をする必要があります。 ここでは、Front側に Proxy を使う方法で回避します。以下2パターンのどちらかを使います。 方法1: package.json に proxy を設定する package.json に以下を追記します。 pacage.json "proxy": "http://backend:3000", この設定があると、text/html 以外のヘッダのリクエストを proxy のアドレスを origin としてリクエストするようになるため、Same-Origin として認識されます。 方法2: http-proxy-middleware を使う 複数の proxy を設定したい場合にはこちらの方法を使います。 src/setupProxy.js を作成します。 src/setupProxy.js const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use(proxy('/user', { target: 'http://backend:3000' })) } この設定により、Reactアプリに対して /user にリクエストが来たときに http://backend:3000 にリクエストが飛ぶことになり、方法1と同様に Same-Origin として通信できます。 app.use(proxy()) は複数記述できるため、リクエストのパスにより別の proxy に分けて設定することもできます。 ちなみに create-react-app は、npm start の実行時に setupProxy.js を自動で読み込んで処理をするようになっているため、他のファイルにimportをする必要はありません。（ただし、npm run buildでは機能しません。） 画面の作成 src/App.js を以下に編集します。 src/App.js import { useEffect, useState } from 'react'; const App = () => { const [users, setUsers] = useState([]); useEffect(() => { fetch('/user') .then(res => res.json()) .then(data => { setUsers(data); }).catch(err => { console.log(err) }); }, []); return ( <div> {users.map((user, index) => <p key={index}>{ user.name }</p> )} </div> ); } export default App; 画面読み込み時に fetch('/user') が実行され、Proxyの設定によりExpressサーバ ( http://backend:3000/user ) にリクエストが送られます。 このAPIから取得したデータを users ステートに格納し、画面に表示します。 Reactサーバの起動 Reactサーバを起動します。 $ yarn start ホスト側のブラウザで http://localhost:3001/ にアクセスすると、 Taro Jiro が画面に表示されることが確認できました。

最近になってサーバー上でDockerを使うようになり，色々調べたのでメモ． 複数のコンテナをまとめて管理したい場合はdocker-composeを使う．ここではPostgresとpgAdminコンテナをまとめて作成・起動する． とりあえず以下が設定ファイルの例 docker-compose.yml version: "3" services: postgres: image: postgres:latest container_name: "my_postgres" restart: always environment: POSTGRES_USER: user_name POSTGRES_PASSWORD: password POSTGRES_DB: db_name LANG: ja_JP.UTF-8 TZ: "Aisa/Tokyo" ports: - "5432:5432" volumes: - volume_postgres:/var/lib/postgresql/data pgadmin: image: dpage/pgadmin4 container_name: "my_pgadmin4" restart: always ports: - 81:80 - 444:443 environment: PGADMIN_DEFAULT_EMAIL: my_email PGADMIN_DEFAULT_PASSWORD: password volumes: - volume_pgadmin:/var/lib/pgadming depends_on: - postgres volumes: volume_pg: volume_pgadmin: 上記ファイルがあるディレクトリで以下のコマンドを打つことでimageのDL，コンテナのbuild，起動を全てやってくれる．-dをつけないとデタッチせずにフォアグラウンドでコンテナが起動する．buildするときにキャッシュを使いたくない場合はdocker-compose build --no-cacheとするらしい． 別途psとexecでコンテナの稼働状況を確認したり，コンテナに入ったりできる． docker-compose up -d # imageのDL，コンテナのbuild，起動 docker-compose ps # docker-composeで起動したコンテナの稼働状況を確認 docker-compose exec service_name /bin/bash # コンテナ内に入る 学んだこと YMLファイルで-がついてるのは配列の値，ついてないのは文字列として処理される． Postgresで日本語を使えるようにしたい場合，LANGにUTF-8を指定しておけば良い模様（コンテナ内でpsqlを使ってログインするとロケール設定のエラーが出る... ただしテーブルにデータを日本語で保存できた) トップレベルのvolumes以下で指定されたVolumeはパブリック扱いになって外部のコンテナからもアクセスできるらしい．Webアプリからアクセスするならここで指定する必要がある． docker-compose exec service_name /bin/bash でコンテナにアクセスできる．service_nameはトップレベルのservices直下に書いた値（例ではpostgresかpgadmin)．その下のcontainer_nameを書いてたから動かなくてはまった． 色々やってみてPostgresコンテナにはアクセスできて使えるようになった．pgAdminコンテナはまた後で使ってみたい． ついでに確認したこと railsで本番環境のDBコンソールに入るにはrails dbconsole --environment=production railsで本番環境のDBテーブルにseedデータを入れるにはrails db:migrate RAILS_ENV=production psqlでデータベースを切り替えるには\c database_name

自分用の構築メモです。 VirtualBox の設定 ホストネットワークマネージャーを作成する 仮想マシンを作成する際にNICをNATとホストオンリーアダプターの２つ設定する Ubuntu Server 20.04をインストール インストールが始まったら、NICを２つとも切断するとUpdateが失敗するのでインストールが早く終る Ubuntuの設定 SSHの設定 Ubuntu sudo sed -i 's/#PubkeyAuthentication/PubkeyAuthentication/g' /etc/ssh/sshd_config sudo sed -i 's/#AuthorizedKeysFile/AuthorizedKeysFile/g' /etc/ssh/sshd_config sudo systemctl restart sshd.service ssh-keygen -t rsa -b 4096 -C "moritalous" cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys Dockerインストール Ubuntu curl -fsSL https://get.docker.com -o get-docker.sh && \ sudo sh ./get-docker.sh && \ sudo usermod -aG docker $USER VirtualBoxゲストツールインストール Ubuntu sudo apt update && \ sudo apt install -y virtualbox-guest-dkms virtualbox-guest-utils && \ sudo usermod -aG vboxsf $USER # macと同じパスで共有するため sudo mkdir -p /Users/Shared/VBox macの設定 鍵でSSHログインする設定 ~/.ssh/config Host Ubuntu-VirtualBox-Docker HostName xxx.xxx.xxx.xxx User ubuntu IdentityFile ~/.ssh/xxxxxxxxxx/id_rsa Docker Clientをインストール mac curl https://download.docker.com/mac/static/stable/x86_64/docker-20.10.9.tgz -o docker-20.10.9.tgz tar xzvf docker-20.10.9.tgz sudo xattr -rc docker mkdir ~/bin cp -rf docker/* ~/bin/ echo 'export PATH=$PATH:~/bin' >> ~/.zshrc docker context create vbox --docker "host=ssh://ubuntu@Ubuntu-VirtualBox-Docker" docker context use vbox VSCodeの.devcontainerの設定 workspaceFolderを追加 workspaceMountを追加 mountsを追加 remoteUserを削除（rootで動くようにする） .devcontainer // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // https://github.com/microsoft/vscode-dev-containers/tree/v0.202.1/containers/ubuntu { "name": "Ubuntu", "runArgs": ["--init"], "build": { "dockerfile": "Dockerfile", // Update 'VARIANT' to pick an Ubuntu version: hirsute, focal, bionic // Use hirsute or bionic on local arm64/Apple Silicon. "args": { "VARIANT": "focal" } }, // ここから追加 "workspaceFolder": "/workspace", "workspaceMount": "source=workspace,target=/workspace,type=volume", "mounts": [ "source=/Users/Shared/VBox,target=/workspace/VBox,type=bind,consistency=cached" ], // ここまで追加 // Set *default* container specific settings.json values on container create. "settings": {}, // Add the IDs of extensions you want installed when the container is created. // "extensions": [], "extensions": [] // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [], // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "uname -a", // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. // rootユーザーで動かす // "remoteUser": "vscode" // rootユーザーで動かす } VirtualBoxの起動（コマンドラインでヘッドレス） mac VBoxManage startvm Ubuntu20.04-docker --type headless

他のタグ AWS Android Docker Git Go iOS Java JavaScript Linux Node.js PHP Python Rails React Ruby Swift TypeScript Vim Vue.js 初心者 集計について 期間: 2021-10-17 ~ 2021-10-18 GitHub スターをもらえるととっても励みになります LGTM 数ランキング 1 位: SAP ABAP Platform 1909, Developer Edition（dockerhub）をopenSUSE Leap 15.3（EC2）で起動してみる AWS Docker SAP openSUSE abap 3 LGTM　1 ストック @SAITO_Keita さん ( 2021-10-17 17:59 に投稿 )

List images docker images List running container docker ps List container(起動の有無に関わらず) docker ps -a Stop container docker stop "containerId" Delete container docker rm "containerId" Start container docker start "containerId" Start PostgreSQL Image docker run --name postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=sample_db -p 5432:5432 postgres:12

※ Docker Composeによる開発が前提になっています。 ※ ここではMySQLを利用しています。 はじめに データベースだけ別でホストに用意して、ポートを開いて繋げる方法でも悪くはないのです。 しかし環境的なまとまりが悪いので、普段はDocker Composeを利用しています。 探しても意外と欲しい情報が見つからず、かなり調べながら作った経緯がありますので、備忘録を兼ねて共有しておきます。 手順 1. 任意の docker-compose.yml を用意する。 docker-compose.yml version: "3" services: my_app: build: ./app ports: - 5000:5000 volumes: - ./app:/app tty: true この段階では、データベース以外の環境は揃っているものとします。 2. docker-compose.yml にデータベース用の設定を追記する。 ここでは、MySQLとphpMyAdminを入れています。 MySQLの準備ができる前にphpMyAdminが立ち上がると正常に動作しないため、healthcheckをさせています。 docker-compose.yml version: "3" services: app: build: ./app depends_on: - mysql ports: - 5000:5000 volumes: - ./app:/app tty: true mysql: image: mysql:5.7 environment: - MYSQL_ROOT_PASSWORD=password - MYSQL_USER=user - MYSQL_PASSWORD=password - TZ=Asia/Tokyo volumes: - ./db/data:/var/lib/mysql - ./db/initdb.d:/docker-entrypoint-initdb.d ports: - 3306 command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci healthcheck: test: /etc/init.d/mysql status start_period: 10s interval: 1s retries: 120 phpmyadmin: image: phpmyadmin/phpmyadmin:5.1.1 depends_on: mysql: condition: service_healthy environment: - PMA_ARBITRARY=1 - PMA_HOST=mysql - PMA_USER=root - PMA_PASSWORD=password ports: - 8080:80 volumes: - ./db/phpmyadmin/sessions:/sessions 3. ./db/initdb.d/1_init.sql を作成し、初回に実行したいSQL文を記述する。 1_init.sql CREATE DATABASE `sample_db`; USE `sample_db`; CREATE TABLE `sample_data` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL, `value` varchar(600) COLLATE utf8mb4_unicode_ci NOT NULL, PRIMARY KEY (`id`), ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; INSERT INTO `sample_data` (`id`, `name`, `value`) VALUES (1, "name_1", "This is value1."), (2, "名前2", "これは名前2です。"); 4. docker-compose up する。 データベースの初期化にはいくらか時間がかかるため、 http://localhost:8080 でphpMyAdminが表示されるまで少し待ちます。 あまりに遅い場合、 1_init.sql に構文エラーがある可能性があります。 その場合、一旦 down して再度 up することで、phpMyAdminにアクセスできる場合があります。 すべての準備が完了したら、下記の接続情報を利用できます。 .env host="mysql" port=3306 user="user" password="password" db="sample_db" 参考 その他多数

概要 2021/10/12にNuxt3がリリースされました。 早速触ってみようと思い、今回は最近よくDocker上に開発環境を構築することが多いので、せっかくならNuxtもDocker上に構築しようと思いました。 ただ、初期設定で少し詰まった部分があったので、備忘録もかねてまとめようと思います。 構成 まずは、下記のような構成でファイルを作成します。 nuxt3-docker-app ├ docker-compose.yml ├ node │ └ Dockerfile └ src 各ファイルの準備 Dockerの起動に必要な各ファイルを準備します。 docker-compose.yml 今回はNode.jsのみ使用するので、必要な記述を記載します。 docker-compose.yml version: '3' services: node: build: node volumes: - ./src:/root/src tty: true environment: - CHOKIDAR_USEPOLLING=true ports: - '3000:3000' Dockerfile Node.jsのバージョンとポートを記述します。 Dockerfile FROM node:14.16.1 EXPOSE 3000 Nuxt3をインストールする まずDockerをCompose Upで立ち上げます 次にNode.jsのContainerが起動しているので、Attach Shellします Attach Shellしたら下記コマンドを実行し、作業ディレクトリに移動します cd root/src 下記コマンドを実行します（詳細は公式HPをご参照ください） npx nuxi init 【アプリケーションの名前（今回はappとします）】 下記コマンドでディレクトリを移動します cd app 下記コマンドを実行し、Nuxt3をインストールします npm install インストールが完了したら、下記コマンドを実行し、開発サーバを立ち上げます npm run dev 上手くいけば開発サーバが立ち上がりますが、私は以下のような問題が発生しました。 問題 開発サーバを立ち上げると無限リロードが起こる 開発サーバが立ち上がり、「 http://localhost:3000/ 」にアクセスすると画面は表示されますが、リロードが無限に起こってしまう問題が発生しました。 これでは、まともに開発出来ないので原因を調べたのですが、以下のようなコンソールエラーが発生していました。 WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: 解決方を探してみたのですが、Nuxt3が原因なのか、バンドルに使用しているViteが原因なのかなど原因を解明することは出来ませんでした。 ただ、エラーメッセージに表示されているポートをdocker-compose.ymlに追加することでこの問題が発生しなくなりました。 docker-compose.yml version: '3' services: node: build: node volumes: - ./src:/root/src tty: true environment: - CHOKIDAR_USEPOLLING=true ports: - '3000:3000' - '24678:24678' # 追加 上記のように「- '24678:24678'」を追加後、Docker Restartをして、先ほどと同様に開発サーバを立ち上げると正常に起動していることが確認できました。 成果物 今回作成したものは下記リポジトリにアップしました。