In one project, I decided to use Rails (API server) MySQL (DB server) x Nuxt (web server), so I decided to build the environment using Docker. At the same time as leaving a log, I will try to build an environment in a form that can be reused as universally as possible.
"Reusable form" means that when I used Laravel in another project before, I built the environment with laradock, but the environment variable is the application name and Just specify the port number, and it will build a container etc. This time I will make a Rails version of it. (By the way, laradock does not have a Dockerfile to launch a container for nuxt.)
All we have to do this time is read the values from the environment variables and set the Dockerfile and docker-compose.yml. The created environment can be found at here, so please check the details at any time.
.
|- mysql
| |- Dockerfile
| └ my.cnf
|- nuxt
| |- src
| |└ nuxt application
| └ Dockerfile
|- rails
| |- src
| | |- Gemfile
| | |- Gemfile.lock
| |└ rails application
| └ Dockerfile
|- docker-compose.yml
└ .env
First, we will build a DB server.
Dockerfile
mysql/Dockerfile
ARG MYSQL_VERSION
FROM mysql:${MYSQL_VERSION}
ENV TZ ${TIMEZONE}
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && chown -R mysql:root /var/lib/mysql/
COPY my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 0444 /etc/mysql/conf.d/my.cnf
CMD ["mysqld"]
EXPOSE 3306
docker-compose.yml
docker-compose.yml
version: "3.7"
services:
mysql:
build:
context: ./mysql
args:
- MYSQL_VERSION=${MYSQL_VERSION}
image: ${PROJECT_NAME}-mysql-img
container_name: "${PROJECT_NAME}_mysql"
environment:
- MYSQL_DATABASE=${MYSQL_DATABASE}
- MYSQL_USER=${MYSQL_USER}
- MYSQL_PASSWORD=${MYSQL_PASSWORD}
- MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
- TZ=${TIMEZONE}
volumes:
- ${DATA_PATH_HOST}/mysql:/var/lib/mysql
ports:
- "${MYSQL_PORT}:3306"
user: "1000:50"
command: --innodb-use-native-aio=0
$ docker-compose up -d mysql
By the way, the env file looks like this. Please set here individually as you like.
.env
###########################################################
###################### General Setup ######################
###########################################################
# PROJECT NAME
PROJECT_NAME=railsdock
# TIMEZONE
TIMEZONE=Asia/Tokyo
# Choose storage path on your machine. For all storage systems
DATA_PATH_HOST=./.storage
### MYSQL #################################################
MYSQL_VERSION=8.0.21
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d
### Rails #################################################
RAILS_PORT=23450
### NUXT #################################################
NUXT_PORT=8080
This time, we will build a Rails environment as an API server called from Nuxt (front).
Dockerfile
rails/Dockerfile
FROM ruby:2.7.1
RUN apt-get update -qq \
&& apt-get install -y build-essential default-libmysqlclient-dev \
&& rm -rf /var/lib/apt/lists/* \
&& gem update
WORKDIR /rails/src
COPY ./src/Gemfile /rails/src/
COPY ./src/Gemfile.lock /rails/src/
RUN bundle install
EXPOSE 23450
CMD ["bundle", "exec", "rails", "server", "-p", "23450", "-b", "0.0.0.0"]
By specifying CMD, the rails server can be started just by starting the container.
docker-compose.yml
docker-compose.yml
version: "3.7"
services:
mysql:
#abridgement
rails:
container_name: ${PROJECT_NAME}-rails
build: rails/
image: ${PROJECT_NAME}-rails-img
volumes:
- ./rails:/rails
ports:
- "${RAILS_PORT}:23450"
depends_on:
- mysql
stdin_open: true
tty: true
By specifying mysql with depends_on, the rails server will be started after the mysql server container is started.
rails/src/Gemfile
source 'https://rubygems.org'
gem 'rails', '6.0.3'
Also, make a Gemfile.lock.
touch rails/src/Gemfile.lock
$ docker-compose run rails rails new . --database=mysql --api
Set password and host in database.yml
rails/src/config/database.yml
default: &default
adapter: mysql2
encoding: utf8mb4
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password: root # <= .MYSQL set in env_ROOT_PASSWORD
host: mysql # <= docker-compose.The service name set in the yml service
$ docker-compose run rails rails db:create
$ docker-compose up -d rails
Your Rails application should now be up and running.
Please access 23450 (port number follows your own env file) and check the startup.
# Nuxt (front environment construction)
Finally, we will build an application server with Nuxt.
Dockerfile
#### **`nuxt/Dockerfile`**
```dockerfile
FROM node:14.5.0
ENV LNAG=C.UTF-8 \
TZ=Asia/Tokyo
WORKDIR /nuxt/src
RUN apt-get update && \
yarn global add \
create-nuxt-app \
nuxt \
@vue/cli \
pug \
pug-plain-loader \
node-sass \
sass-loader
ENV HOST 0.0.0.0
EXPOSE 8080
CMD [ "yarn", "dev" ]
docker-compose.yml
docker-compose.yml
version: "3.7"
services:
mysql:
#abridgement
rails:
#abridgement
nuxt:
build:
context: ./nuxt
dockerfile: Dockerfile
image: ${PROJECT_NAME}-nuxt-img
container_name: "${PROJECT_NAME}_nuxt_app"
environment:
- HOST=0.0.0.0
volumes:
- ./nuxt:/nuxt:cached
ports:
- ${NUXT_PORT}:8080
stdin_open: true
tty: true
$ docker-compose run nuxt npx create-nuxt-app .
create-nuxt-app v3.1.0
✨ Generating Nuxt.js project in .
? Project name: src
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code)
For Nuxt.js modules, we recommend choosing axios. Also, although I have not introduced it this time, if you install Vuetify in the UI framework, you can easily use nice components. So, I think it's a perfect framework for those who are not good at front desk. You can install it later, so please add it when you need it.
js:nxut/src/nuxt.config.js
server: {
port: 8080, //Default: 3000
host: '0.0.0.0' //Default: localhost
},
By default, nuxt is set to start the server on port 3000, localhost. If you change the port number arbitrarily, add the above server setting to nuxt.config.js at the end.
$ docker-compose up -d nuxt
Building the first nuxt application will take some time. I think it will take about 1 minute at the longest, so please wait a moment and access localhost: 8080. If you can see the top page of nuxt, the development environment is complete.
Currently I'm implementing it with Docker on Vagrant. This made container builds and hot reloads faster. (I feel like it has become.) I will leave a log for this as well.
Recommended Posts