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 6.x)
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
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 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 Spring Boot-gradle-mysql development environment with Docker
Build a development environment where Ruby on Rails breakpoints work on Windows
Build a development environment for Django + MySQL + nginx with Docker Compose
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 local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
Build a development environment on AWS EC2 with CentOS7 + Nginx + pm2 + Nuxt.js
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
[Win10] Build a JSF development environment with NetBeans
Build a development environment for Docker, java, vscode
[Rails] How to build an environment with Docker
How to build a Pytorch environment on Ubuntu
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
[First environment construction] I tried to create a Rails 6 + MySQL 8.0 + Docker environment on Windows 10.
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
Let's create a gcloud development environment on a centos8 container
[Note] Build a Python3 environment with Docker in EC2
[Note] Create a java environment from scratch with docker
How to build Java development environment with VS Code
Create Chisel development environment with Windows10 + WSL2 + VScode + Docker
Install Ubuntu 20.04 in virtual box on windows10 and build a development environment using docker
Build docker environment with WSL
Ruby ① Build a Windows environment
I made a development environment with rails6 + docker + postgreSQL + Materialize.
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
Build a "Spring Thorough Introduction" development environment with IntelliJ IDEA