Build a development environment to create Ruby on Jets + React apps with Docker

Overview

This is a development environment construction procedure for creating Ruby on Jets (API) and React apps. Create Ruby on Jets exclusively for the API. DB uses MySQL. React uses Typescript. Docker uses Docker for Mac.

When I open the page locally, I get the user information stored in the DB from the API and display it. We haven't even deployed to AWS.

file organization

reactjets/
  ├ api/
  │  ├ ...
  ├ front/
  │  ├ ...
  ├ docker/
  │  ├ api/
  │  │  ├ Dockerfile
  │  ├ front/
  │  │  ├ Dockerfile
  │  ├ mysql/
  │  │  ├ conf.d
  │  │  │  ├ my.cnf
  │  ├ docker-compose.yml

Docker environment construction

Create Dockerfile (2 types), Gemfile, Gemfile.lock, my.cnf, docker-compose.yml

docker/front/Dockerfile


FROM node:12.18

docker/api/Dockerfile


FROM ruby:2.5.8

WORKDIR /api
COPY api /api
RUN bundle install

api/Gemfile


source 'https://rubygems.org'
gem 'jets'

Gemfile.lock creates an empty file

api/Gemfile.lock


touch Gemfile.lock

:docker/mysql/conf.d/my.cnf


[mysqld]
character-set-server=utf8mb4
explicit-defaults-for-timestamp=1

[client]
default-character-set=utf8mb4

docker/docker-compose.yml


version: '3'

services:
  front:
    build:
      context: ../
      dockerfile: docker/front/Dockerfile
    volumes:
      # :The left part fits your environment
      - ~/Dev/reactjets/front:/front
    ports:
      - "8000:3000"
    stdin_open: true

  api:
    build:
      context: ../
      dockerfile: docker/api/Dockerfile
    command: bash -c "bundle exec jets server --port 3000 --host 0.0.0.0"
    volumes:
      # :The left part fits your environment
      - ~/Dev/reactjets/api:/api
    ports:
      - "3000:3000"
    depends_on:
      - db

  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: app
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    ports:
      - 3306:3306
    volumes:
      - ./mysql/conf.d:/etc/mysql/conf.d

docker-compose build

$ docker-compose build

Jets app creation

$ docker-compose run api jets new . --mode api --database=mysql

Confirm that the jets application is created under api Added environment variables to .env.development for DB connection

:.env.development


DB_HOST=db
DB_NAME=app
DB_USER=docker
DB_PASS=docker

React app creation

$ docker-compose run --rm front sh -c 'yarn create react-app front --template typescript'

Confirm that react application is created under front

Start-up

$ docker-compose up --build

react start

$ docker exec -it docker_front_1 bash

# cd front
# yarn start

Confirm that the screen is displayed Ruby on Jets : http://localhost:3000 React : http://localhost:8000 スクリーンショット 2020-06-27 10.42.37.png スクリーンショット 2020-06-27 17.56.45.png

api creation

Create user with scaffold

$ docker exec -it docker_api_1 bash

# jets generate scaffold user name:string age:integer
# jets db:create db:migrate
GRANT ALL ON *.* to [email protected]'%';

Since the users table has been created, INSERT 2 cases directly. If you access http: // localhost: 3000 / users, you can see that the following data is returned.

[{"id":1,"name":"mikami","age":26,"created_at":"2020-06-27T18:57:44.000Z","updated_at":"2020-06-27T18:57:44.000Z"},{"id":2,"name":"tomoyuki","age":32,"created_at":"2020-06-27T18:57:44.000Z","updated_at":"2020-06-27T18:57:44.000Z"}]

Communication between front and api

front side

axios installation

$ docker exec -it docker_front_1 bash

# cd front
# yarn add axios

Edit App.tsx

App.tsx


import React from 'react';
import axios from 'axios';
import './App.css';

class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      users: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:3000/users')
      .then((result) => {
        this.setState({ users: result.data });
      })
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        <div>
          { this.state.users.map((v: any) => {
            return (
              <div key={v.id}>
                <p>id: {v.id}</p>
                <p>name: {v.name}</p>
                <p>age: {v.age}</p>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

export default App;

Since it is not possible to communicate with CORS as it is, set CORS on the api side.

api side

Uncomment the following

application.rb


config.cors = true # for '*'' # defaults to false

Verification

Reboot

$ docker-compose stop
$ docker-compose start
$ docker exec -it docker_front_1 bash

# cd front
# yarn start

If you access http: // localhost: 8000 / and the following is displayed, communication is ok スクリーンショット 2020-06-27 19.25.09.png

WIP Deployment procedure to AWS

Ruby on Jets deploy

https://qiita.com/kskinaba/items/9c570093ed912f8f1681 Do this street

It seems to be useless unless it is Ruby 2.5 series ...

Deploying to Lambda api-dev environment...
/usr/local/bundle/gems/memoist-0.16.2/lib/memoist.rb:213: warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
/usr/local/bundle/gems/jets-2.3.16/lib/jets/lambda/dsl.rb:319: warning: The called method `_unmemoized_find_all_tasks' is defined here
Building CloudFormation templates.
Generated CloudFormation templates at /tmp/jets/api/templates
Deploying CloudFormation stack with jets app!
Waiting for stack to complete
02:25:31AM CREATE_IN_PROGRESS AWS::CloudFormation::Stack api-dev User Initiated
02:25:34AM CREATE_IN_PROGRESS AWS::S3::Bucket S3Bucket
02:25:35AM CREATE_IN_PROGRESS AWS::S3::Bucket S3Bucket Resource creation Initiated
02:25:56AM CREATE_COMPLETE AWS::S3::Bucket S3Bucket
02:25:58AM CREATE_COMPLETE AWS::CloudFormation::Stack api-dev
Stack success status: CREATE_COMPLETE
Time took for stack deployment: 28s.
You are using Ruby version 2.7.1 which is not supported by Jets.
Jets uses Ruby 2.5.3.  You should use a variant of Ruby 2.5.x

Recommended Posts

Build a development environment to create Ruby on Jets + React apps with Docker
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Steps to build a Ruby on Rails development environment with Vagrant
I tried to create a padrino development environment with Docker
Build a PureScript development environment with Docker
Build a Wordpress development environment with Docker
Build a WordPress development environment quickly with Docker
Create a Spring Boot development environment with docker
I tried to build a Firebase application development environment with Docker in 2020
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Build a Ruby on Rails development environment on AWS Cloud9
Try to build a Java development environment using Docker
Create a Vue3 environment with Docker!
Build Unity development environment on docker
I tried to create a java8 development environment with Chocolatey
How to build Rails, Postgres, ElasticSearch development environment with Docker
Build a Node-RED environment with Docker to move and understand
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
How to quit Docker for Mac and build a Docker development environment with Ubuntu + Vagrant
Docker command to create Rails project with a single blow in environment without Ruby
Ruby on Rails development environment construction with Docker + VSCode (Remote Container)
I tried to create a Spring MVC development environment on Mac
Create a MySQL environment with Docker from 0-> 1
Build a development environment where Ruby on Rails breakpoints work on Windows
[Ruby] Building a Ruby development environment on Ubuntu
Build a Java development environment on Mac
Build a development environment for Django + MySQL + nginx with Docker Compose
Create a development environment for Ruby 3.0.0 and Rails 6.1.0 on Ubuntu 20.04.1 LTS
Build an environment with Docker on AWS
Build an Ultra96v2 development environment on Docker 1
How to build Rails 6 environment with Docker
Build a simple Docker + Django development environment
Build debug environment on container --Build local development environment for Rails tutorial with Docker-
Minimal steps to set up a Ruby environment with rbenv on Ubuntu 20.04
[Copy and paste] Build a Laravel development environment with Docker Compose Part 2
[Docker] How to create a virtual environment for Rails and Nuxt.js apps
Build a development environment on AWS EC2 with CentOS7 + Nginx + pm2 + Nuxt.js
Ruby on Rails ✕ Docker ✕ MySQL Introducing Docker and docker-compose to apps under development
Create a java web application development environment with docker for mac part2
Build a development environment for Docker + Rails6 + Postgresql
[Memo] Create a CentOS 8 environment easily with Docker
Build a Laravel / Docker environment with VSCode devcontainer
Build a simple Docker Compose + Django development environment
Build a development environment for Docker, java, vscode
[Rails] How to build an environment with Docker
How to build a Pytorch environment on Ubuntu
[First team development ②] Build an environment with Docker
Build a Java development environment with VS Code
Build a Doker-based development environment on Windows 10 Home 2020 ver. Part 1 Until WSL2-based Docker build
Create a Java development environment using jenv on Mac
Memo to build a Servlet environment on AWS EC2
Build Java development environment with VS Code on Mac
[Introduction] Try to create a Ruby on Rails application
How to build docker environment with Gradle for intelliJ
Docker the development environment of Ruby on Rails project
Easily build a Vue.js environment with Docker + Vue CLI
Let's create a gcloud development environment on a centos8 container
[Note] Build a Python3 environment with Docker in EC2
Build Java development environment with WSL2 Docker VS Code
How to build Java development environment with VS Code