Créez un environnement de développement pour créer des applications Ruby on Jets + React avec Docker

Aperçu

Il s'agit d'une procédure de construction d'environnement de développement pour créer des applications Ruby on Jets (API) et React. Créez Ruby on Jets exclusivement pour l'API. DB utilise MySQL. React utilise Typescript. Docker utilise Docker pour Mac.

Lorsque j'ouvre la page localement, j'obtiens les informations utilisateur stockées dans la base de données à partir de l'API et je les affiche. Nous ne l'avons pas déployé sur AWS.

organisation des fichiers

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

Construction de l'environnement Docker

Créer 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 crée un fichier vide

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:
      # :La partie gauche s'adapte à votre environnement
      - ~/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:
      # :La partie gauche s'adapte à votre environnement
      - ~/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

build docker-compose

$ docker-compose build

Création d'applications Jets

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

• Overwrite / api / Gemfile? (Entrez "h" pour obtenir de l'aide) Lorsque [Ynaqdhm] apparaît, Y

Confirmez que l'application jets est créée sous api Ajout d'une variable d'environnement à .env.development pour la connexion à la base de données

:.env.development

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

Création de l'application React

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

Confirmez que l'application react est créée sous front

Commencez

$ docker-compose up --build

réagir commencer

$ docker exec -it docker_front_1 bash

# cd front
# yarn start

Confirmez que l'écran est affiché Ruby on Jets : http://localhost:3000 React : http://localhost:8000

création d'API

Créer un utilisateur avec échafaudage

$ docker exec -it docker_api_1 bash

# jets generate scaffold user name:string age:integer
# jets db:create db:migrate

• Si l'accès refusé est affiché dans jets db: create db: migrate, vérifiez les paramètres d'autorisation de l'utilisateur du côté mysql.

GRANT ALL ON *.* to docker@'%';

La table des utilisateurs étant créée, INSÉRER directement 2 cas de manière appropriée Si vous accédez à http: // localhost: 3000 / users, vous pouvez voir que les données suivantes sont renvoyées.

[{"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 entre le front et l'API

face avant

installation axios

$ docker exec -it docker_front_1 bash

# cd front
# yarn add axios

Modifier 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;

Puisqu'il n'est pas possible de communiquer avec CORS tel quel, définissez CORS du côté de l'API.

côté API

Décommenter ci-dessous

application.rb

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

Vérification

Redémarrer

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

# cd front
# yarn start

Si vous accédez à http: // localhost: 8000 / et que le message suivant s'affiche, la communication est correcte

WIP Procédure de déploiement sur AWS

Déploiement de Ruby on Jets

https://qiita.com/kskinaba/items/9c570093ed912f8f1681 Faites cette rue

Cela semble inutile à moins qu'il ne s'agisse de la série Ruby 2.5 ...

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