Erstellen Sie eine Entwicklungsumgebung, um Ruby on Jets + React-Apps mit Docker zu erstellen

Überblick

Dies ist eine Entwicklungsumgebung zum Erstellen von Ruby on Jets (API) - und React-Apps. Erstellen Sie Ruby on Jets exklusiv für die API. DB verwendet MySQL. React verwendet Typescript. Docker verwendet Docker für Mac.

Wenn ich die Seite lokal öffne, erhalte ich die in der Datenbank gespeicherten Benutzerinformationen von der API und zeige sie an. Wir haben es nicht für AWS bereitgestellt.

Dateiorganisation

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

Aufbau der Docker-Umgebung

Erstellen Sie Dockerfile (2 Typen), 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 erstellt eine leere Datei

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:
      # :Der linke Teil passt zu Ihrer Umgebung
      - ~/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:
      # :Der linke Teil passt zu Ihrer Umgebung
      - ~/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 Erstellung

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

• / Api / Gemfile überschreiben? (Geben Sie "h" ein, um Hilfe zu erhalten.) Wenn [Ynaqdhm] angezeigt wird, wird Y.

Bestätigen Sie, dass die Jets-Anwendung unter API erstellt wurde Umgebungsvariable zu .env.development für DB-Verbindung hinzugefügt

:.env.development

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

Reagieren Sie auf die App-Erstellung

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

Vergewissern Sie sich, dass die Reaktionsanwendung vorne erstellt wurde

Anlaufen

$ docker-compose up --build

Reaktionsstart

$ docker exec -it docker_front_1 bash

# cd front
# yarn start

Bestätigen Sie, dass der Bildschirm angezeigt wird Ruby on Jets : http://localhost:3000 React : http://localhost:8000

API-Erstellung

Benutzer mit Gerüst erstellen

$ docker exec -it docker_api_1 bash

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

• Wenn in jets db: create db: migrate der verweigerte Zugriff angezeigt wird, überprüfen Sie die Berechtigungseinstellungen des Benutzers auf der MySQL-Seite.

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

Da die Benutzertabelle erstellt wurde, fügen Sie 2 Fälle direkt entsprechend ein Wenn Sie auf http: // localhost: 3000 / users zugreifen, können Sie sehen, dass die folgenden Daten zurückgegeben werden.

[{"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"}]

Kommunikation zwischen Front und API

Vorderseite

Axios Installation

$ docker exec -it docker_front_1 bash

# cd front
# yarn add axios

Bearbeiten Sie 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;

Da es nicht möglich ist, mit CORS so wie es ist zu kommunizieren, setzen Sie CORS auf der API-Seite.

API-Seite

Kommentar unten

application.rb

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

Bestätigung

Starten Sie neu

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

# cd front
# yarn start

Wenn Sie auf http: // localhost: 8000 / zugreifen und Folgendes angezeigt wird, ist die Kommunikation in Ordnung

WIP Bereitstellungsverfahren für AWS

Ruby on Jets bereitstellen

https://qiita.com/kskinaba/items/9c570093ed912f8f1681 Machen Sie diese Straße

Es scheint nutzlos zu sein, es sei denn, es ist Ruby 2.5-Serie ...

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