├── .gitattributes ├── .gitignore ├── README.md ├── backend ├── Dockerfile ├── Gemfile └── entrypoint.sh ├── docker-compose.backend.yml ├── docker-compose.frontend.yml └── frontend ├── Dockerfile ├── entrypoint.sh └── neumann-client └── .gitkeep /.gitattributes: -------------------------------------------------------------------------------- 1 | # See https://git-scm.com/docs/gitattributes for more about git attribute files. 2 | 3 | # Mark the database schema as having been generated. 4 | backend/db/schema.rb linguist-generated 5 | 6 | # Mark any vendored files as having been vendored. 7 | backend/vendor/* linguist-vendored 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac 2 | .DS_Store 3 | 4 | # Rails 5 | 6 | # See https://help.github.com/articles/ignoring-files for more about ignoring files. 7 | # 8 | # If you find yourself ignoring temporary files generated by your text editor 9 | # or operating system, you probably want to add a global ignore instead: 10 | # git config --global core.excludesfile '~/.gitignore_global' 11 | 12 | # Ignore bundler config. 13 | /backend/.bundle 14 | 15 | # Ignore all logfiles and tempfiles. 16 | /backend/log/* 17 | /backend/tmp/* 18 | !/backend/log/.keep 19 | !/backend/tmp/.keep 20 | 21 | # Ignore pidfiles, but keep the directory. 22 | /backend/tmp/pids/* 23 | !/backend/tmp/pids/ 24 | !/backend/tmp/pids/.keep 25 | 26 | # Ignore uploaded files in development. 27 | /backend/storage/* 28 | !/backend/storage/.keep 29 | /backend/tmp/storage/* 30 | !/backend/tmp/storage/ 31 | !/backend/tmp/storage/.keep 32 | 33 | # Ignore master key for decrypting credentials and more. 34 | /backend/config/master.key 35 | 36 | 37 | # Next.js 38 | *node_modules/ 39 | 40 | # neumann-client 41 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 42 | # dependencies 43 | /frontend/neumann-client/.pnp 44 | frontend/neumann-client/.pnp.js 45 | 46 | # testing 47 | /frontend/neumann-client/coverage 48 | 49 | # next.js 50 | /frontend/neumann-client/.next/ 51 | /frontend/neumann-client/out/ 52 | 53 | # production 54 | /frontend/neumann-client/build 55 | 56 | # misc 57 | *.pem 58 | 59 | # debug 60 | npm-debug.log* 61 | yarn-debug.log* 62 | yarn-error.log* 63 | .pnpm-debug.log* 64 | 65 | # local env files 66 | .env*.local 67 | 68 | # vercel 69 | .vercel 70 | 71 | # typescript 72 | *.tsbuildinfo 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 最初に 2 | 3 | Next.jsとRailsの組み合わせでサービスを作成して見たかったのでたった2つのコマンドで環境を構築出来るようにしました。 4 | 5 | ## 環境構築 6 | 7 | リポジトリを好きなフォルダにcloneする。 8 | 9 | ### バックエンド 10 | 11 | バックエンドのコンテナをビルドして起動するには 12 | 13 | ```bash 14 | # 初回起動時のコマンド 15 | docker-compose -f docker-compose.backend.yml -p backend up --build 16 | ``` 17 | 18 | このコマンド一つでいい感じに環境を作ってサーバを起動してくれる。 19 | 20 | あとは `[localhost:8080](http://localhost:8080)` にアクセスすればrailsにアクセス出来る。 21 | 22 | ただしデータベースの接続設定をしていないのでエラーページが返る。 23 | 24 | 後述で設定する。 25 | 26 | バックエンドのログとフロントエンドのログを別々で確認したいので、docker-composeファイルを分けて起動している。そのため `-p backend` でプロジェクト名を付けてないとコンテナが混合していると警告が出る。 27 | 28 | 環境構築後に使用するコマンド群 29 | 30 | ```yaml 31 | # ビルド後こちらで起動する 32 | docker-compose -f docker-compose.backend.yml -p backend up 33 | 34 | # コンテナに入る際は 35 | docker exec -it backend-rails-api /bin/bash 36 | # そこからDBにアクセスする 37 | # ここからSQL構文で自由にデータ操作出来る 38 | rails dbconsole 39 | 40 | # コンテナの削除 41 | docker-compose -f docker-compose.backend.yml -p backend rm 42 | ``` 43 | 44 | データベースの設定 45 | 46 | `rails new` によって `config/datebase.yml` が作成されていると思うので下記設定に置き換えるとPostgresqlに接続出来るようになる。再びコンテナを止めて `docker-compose -f docker-compose.backend.yml -p backend up` で起動して `[localhost:8080](http://localhost:8080)` にアクセスするとrailsのページが今度はエラーなしで返ってくる。所どころ `neumann` と名前が出てくるがこれは個人的にサービス名に使いたい名前なので作りたいサービスに合わせて変更して貰えればと思う。その際は `docker-compose.backend.yml` 等にも記述されているので全てを変更する必要がある。 47 | 48 | **config/datebase.yml** 49 | 50 | ```yaml 51 | # PostgreSQL. Versions 9.3 and up are supported. 52 | # 53 | # Install the pg driver: 54 | # gem install pg 55 | # On macOS with Homebrew: 56 | # gem install pg -- --with-pg-config=/usr/local/bin/pg_config 57 | # On macOS with MacPorts: 58 | # gem install pg -- --with-pg-config=/opt/local/lib/postgresql84/bin/pg_config 59 | # On Windows: 60 | # gem install pg 61 | # Choose the win32 build. 62 | # Install PostgreSQL and put its /bin directory on your path. 63 | # 64 | # Configure Using Gemfile 65 | # gem "pg" 66 | # 67 | default: &default 68 | adapter: postgresql 69 | encoding: unicode 70 | host: db 71 | username: neumann 72 | password: password 73 | # For details on connection pooling, see Rails configuration guide 74 | # https://guides.rubyonrails.org/configuring.html#database-pooling 75 | pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> 76 | 77 | development: 78 | <<: *default 79 | database: neumann_development 80 | 81 | # The specified database role being used to connect to postgres. 82 | # To create additional roles in postgres see `$ createuser --help`. 83 | # When left blank, postgres will use the default role. This is 84 | # the same name as the operating system user running Rails. 85 | #username: backend 86 | 87 | # The password associated with the postgres role (username). 88 | #password: 89 | 90 | # Connect on a TCP socket. Omitted by default since the client uses a 91 | # domain socket that doesn't need configuration. Windows does not have 92 | # domain sockets, so uncomment these lines. 93 | #host: localhost 94 | 95 | # The TCP port the server listens on. Defaults to 5432. 96 | # If your server runs on a different port number, change accordingly. 97 | #port: 5432 98 | 99 | # Schema search path. The server defaults to $user,public 100 | #schema_search_path: myapp,sharedapp,public 101 | 102 | # Minimum log levels, in increasing order: 103 | # debug5, debug4, debug3, debug2, debug1, 104 | # log, notice, warning, error, fatal, and panic 105 | # Defaults to warning. 106 | #min_messages: notice 107 | 108 | # Warning: The database defined as "test" will be erased and 109 | # re-generated from your development database when you run "rake". 110 | # Do not set this db to the same as development or production. 111 | test: 112 | <<: *default 113 | database: neumann_test 114 | 115 | # As with config/credentials.yml, you never want to store sensitive information, 116 | # like your database password, in your source code. If your source code is 117 | # ever seen by anyone, they now have access to your database. 118 | # 119 | # Instead, provide the password or a full connection URL as an environment 120 | # variable when you boot the app. For example: 121 | # 122 | # DATABASE_URL="postgres://myuser:mypass@localhost/somedatabase" 123 | # 124 | # If the connection URL is provided in the special DATABASE_URL environment 125 | # variable, Rails will automatically merge its configuration values on top of 126 | # the values provided in this file. Alternatively, you can specify a connection 127 | # URL environment variable explicitly: 128 | # 129 | # production: 130 | # url: <%= ENV["MY_APP_DATABASE_URL"] %> 131 | # 132 | # Read https://guides.rubyonrails.org/configuring.html#configuring-a-database 133 | # for a full overview on how database connection configuration can be specified. 134 | # 135 | production: 136 | <<: *default 137 | database: neumann_production 138 | username: backend 139 | password: <%= ENV["BACKEND_DATABASE_PASSWORD"] %> 140 | ``` 141 | 142 | ### フロントエンド 143 | 144 | Next.jsの環境を作るコンテナ 145 | 146 | 下記のコマンドを実行すると `[localhost:3000](http://localhost:3000)` でNext.jsに接続出来るようになる。 147 | 148 | ```bash 149 | # 初回起動時 150 | docker-compose -f docker-compose.frontend.yml -p frontend up --build 151 | ``` 152 | 153 | 環境構築後に使用するコマンド群 154 | 155 | ```bash 156 | # ビルド後こちらで起動する 157 | docker-compose -f docker-compose.frontend.yml -p frontend up 158 | 159 | # コンテナに入る際は 160 | docker exec -it frontend-nextjs /bin/bash 161 | 162 | # コンテナの削除 163 | docker-compose -f docker-compose.frontend.yml -p frontend rm 164 | ``` 165 | 166 | これで環境構築が出来る。 167 | 168 | たった2つのコマンドで環境構築が出来る。一個だけ気になるのが、ctr+cでコンテナを終了する際に `exit 137` でコンテナを終了して正常終了してくれない。調べるとメモリが足りない等の記事が出る。しかし8GBもあげているので別の問題だと思われる。 169 | 170 | 試しにサーバを起動しない状態でコンテナを起動して `ctr+c` したら正常に終了したので 171 | 172 | おそらく rails, next.js等のサーバを起動したままコンテナを終了しているのが原因かと思われる。 173 | 174 | 会社の開発環境でも `exit 137` で終了していたのでこれは仕方なさそう。解決方法ご存知の方いらしたら教えて下さい。 175 | 176 | 何がともあれこれでバンバン開発ライフを送れる。 177 | 178 | ### 参照 179 | 180 | [たった2つのコマンドでNext.js、Rails環境を構築できるようにした。](https://zenn.dev/unemployed/articles/nextjs-rails-postgresql-docker) -------------------------------------------------------------------------------- /backend/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM ruby:3.1 2 | WORKDIR /backend 3 | RUN set -eux && \ 4 | apt-get update -qq && \ 5 | apt-get install -y \ 6 | postgresql-client 7 | 8 | 9 | COPY Gemfile Gemfile.lock* /backend 10 | 11 | COPY entrypoint.sh /usr/bin/ 12 | RUN chmod +x /usr/bin/entrypoint.sh 13 | ENTRYPOINT ["entrypoint.sh"] 14 | 15 | # イメージ実行時に起動させる主プロセスを設定 16 | CMD ["rails", "server", "-p", "8080", "-b", "0.0.0.0"] -------------------------------------------------------------------------------- /backend/Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gem "rails", "~> 7.0.3" -------------------------------------------------------------------------------- /backend/entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | bundle install 5 | 6 | if [ ! -e "/backend/config/routes.rb" ]; then 7 | echo 'rails new APIモード を実行する' 8 | # --skip入れないとpgのgemないってエラーが出る 9 | rails new . --force --api --database=postgresql --skip-git --skip-bundle 10 | bundle install 11 | fi 12 | 13 | # Remove a potentially pre-existing server.pid for Rails. 14 | rm -f /backend/tmp/pids/server.pid 15 | 16 | # Then exec the container's main process (what's set as CMD in the Dockerfile). 17 | exec "$@" -------------------------------------------------------------------------------- /docker-compose.backend.yml: -------------------------------------------------------------------------------- 1 | # dockerエンジンの対象バージョンに合わせる 2 | version: '3' 3 | 4 | services: 5 | db: 6 | image: postgres:14.3 7 | environment: 8 | POSTGRES_USER: neumann 9 | POSTGRES_PASSWORD: password 10 | POSTGRES_DB: neumann_development 11 | TZ: Asia/Tokyo 12 | ports: 13 | - '5432:5432' 14 | # stopでコンテナを落とすならDBのデータは消えないそうなのであえて永続化しない 15 | 16 | backend: 17 | build: 18 | context: ./backend/ 19 | dockerfile: Dockerfile 20 | container_name: backend-rails-api 21 | ports: 22 | - '8080:8080' 23 | working_dir: /backend 24 | # こいつのおかげでctr+cした際にrails serverを切ってからコンテナを終了してくれる 25 | # 137のエラーを解決してくれている 26 | # 初回起動時のみだった。 27 | stop_signal: SIGINT 28 | volumes: 29 | - ./backend:/backend 30 | # docker run -iを意味する 31 | stdin_open: true 32 | # -tを意味する 33 | tty: true 34 | -------------------------------------------------------------------------------- /docker-compose.frontend.yml: -------------------------------------------------------------------------------- 1 | # dockerエンジンの対象バージョンに合わせる 2 | version: '3' 3 | 4 | services: 5 | frontend: 6 | build: 7 | context: ./frontend/ 8 | dockerfile: Dockerfile 9 | container_name: frontend-nextjs 10 | working_dir: /frontend 11 | stop_signal: SIGINT 12 | volumes: 13 | - ./frontend:/frontend 14 | ports: 15 | - '3000:3000' 16 | # docker run -iを意味する 17 | stdin_open: true 18 | # -tを意味する 19 | tty: true -------------------------------------------------------------------------------- /frontend/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:21 2 | WORKDIR /frontend 3 | 4 | COPY /neumann-client /frontend/ 5 | 6 | COPY entrypoint.sh /usr/bin/ 7 | RUN chmod +x /usr/bin/entrypoint.sh 8 | ENTRYPOINT ["entrypoint.sh"] 9 | 10 | # イメージ実行時に起動させる主プロセスを設定 11 | CMD ["npm", "run", "dev"] -------------------------------------------------------------------------------- /frontend/entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | if [ ! -e "/frontend/package.json" ]; then 5 | echo 'nextjsを新規インストール' 6 | rm -rf neumann-client/.gitkeep 7 | npm init -y 8 | npm install create-next-app 9 | npx create-next-app@latest neumann-client --ts --tailwind \ 10 | --no-eslint --app --src-dir --import-alias '@/*' 11 | rm -rf neumann-client/.gitignore 12 | cd neumann-client 13 | fi 14 | 15 | if [ ! -d "/frontend/neumann-client/node_modules" ]; then 16 | echo 'neumann-clientの環境構築' 17 | cd neumann-client 18 | npm install 19 | fi 20 | 21 | # Then exec the container's main process (what's set as CMD in the Dockerfile). 22 | exec "$@" -------------------------------------------------------------------------------- /frontend/neumann-client/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wimpykid719/nextjs-rails-postgresql-docker/f27d08b4f1521965a63602a5cc96f33fce61270c/frontend/neumann-client/.gitkeep --------------------------------------------------------------------------------