mac로 Rails api와 Nuxt를 만드는 Docker 환경

17164 단어 DockernuxtRailsmacOStech

개시하다


WEB 서비스 공부를 시작하고 싶은데 개발 환경을 잘 몰라요.
이런 일로 괴로워하는 경우가 많기 때문에 당장 간단한 개발 환경을 재현할 수 있도록 방법을 미리 남긴다.
※ 본 기사는 각 서류 내 상세 사용 방법은 밝히지 않습니다.

골대

  • railsapi에 대한 접근 허용http://localhost:3000/.
  • http://localhost:8080/로nuxt 디스플레이를 확인할 수 있습니다.

    • 준비물

  • Docker.app
  • 편집
  • 다중 작업 파일

    • docer.app


    Docker Desktop for Mac에 대해서는 https://www.docker.com/products/docker-desktop에서 다운로드할 수 있을 것 같습니다.

    편집자


    Visual Studio Code 등 원하는 편집을 준비하세요.

    몇 개의 업무 문서


    우선 개발 환경의 대본 목록을 준비한다.(이하 루트라고 합니다.)
    예:nuxtdemo 디렉토리
    ※ "★"은 적절한 목록 이름을 사용해도 됩니다.나의 상황은'works'다.
    /Users/ユーザー名/★/nuxtdemo
    nuxtdemo 디렉터리의 구성은 다음과 같다.
    각 파일의 내용은 잠시 후에 기재될 것이다.
    ※ []은api목록,front목록을 가리킵니다.
    docker-compose.yml
.env
[api]
└Dockerfile
└Gemfile
└Gemfile.lock
[front]
└Dockerfile

    각 파일의 컨텐트 정보


    docker-compose.yml
    version: '3.8'

services:
  db:
    image: postgres:12.3-alpine
    environment:
      TZ: UTC
      PGTZ: UTC
      POSTGRES_PASSWORD: $POSTGRES_PASSWORD
    volumes:
      - ./api/tmp/db:/var/lib/postgresql/data

  api:
    stdin_open: true
    tty: true
    build:
      context: ./api
      args:
        WORKDIR: $WORKDIR
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    environment:
      POSTGRES_PASSWORD: $POSTGRES_PASSWORD
      API_DOMAIN: "localhost:$FRONT_PORT"
      APP_URL: "http://localhost:$API_PORT"
    volumes:
      - ./api:/$WORKDIR
    depends_on:
      - db
    ports:
      - "$API_PORT:$CONTAINER_PORT"

  front:
    build:
      context: ./front
      args:
        WORKDIR: $WORKDIR
        CONTAINER_PORT: $CONTAINER_PORT
        API_URL: "http://api:$API_PORT"
        API_URL_BROWSER: "http://localhost:$API_PORT"
    command: yarn run dev
    volumes:
      - ./front:/$WORKDIR
    depends_on:
      - api
    ports:
      - "$FRONT_PORT:$CONTAINER_PORT"
    .env
    # commons
WORKDIR=app
CONTAINER_PORT=3000
API_PORT=3000
FRONT_PORT=8080

# db
POSTGRES_PASSWORD=password
    api/Dockerfile
    FROM ruby:2.7.1-alpine

ARG WORKDIR

ENV RUNTIME_PACKAGES="linux-headers libxml2-dev make gcc libc-dev nodejs tzdata postgresql-dev postgresql git imagemagick" \
    DEV_PACKAGES="build-base curl-dev" \
    HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

COPY Gemfile* ./

RUN apk update && \
    apk upgrade && \
    apk add --no-cache ${RUNTIME_PACKAGES} && \
    apk add --virtual build-dependencies --no-cache ${DEV_PACKAGES} && \
    bundle install -j4 && \
    apk del build-dependencies

COPY . .
    api/Gemfile
    source 'https://rubygems.org'
gem 'rails', '~> 6.0.0'
    front/Dockerfile
    FROM node:14.16.1-alpine

ARG WORKDIR
ARG CONTAINER_PORT
ARG API_URL
ARG API_URL_BROWSER

ENV HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0 \
    API_URL=${API_URL} \
    API_URL_BROWSER=${API_URL_BROWSER}

WORKDIR ${HOME}

# COPY package*.json ./
# RUN yarn install
# COPY . ./
# RUN yarn run build

EXPOSE ${CONTAINER_PORT}

    Rails API 환경 만들기


    서류가 준비되면 railsapi 앱으로 제작한다.
    대상http://localhost:3000/의 URL에 표시된 화면은 다음과 같습니다.

    여기서부터 터미널에 명령을 입력하세요.
    이를 위해 먼저 터미널에서 방금 만든 루트로 이동합니다.
    root $ cd /Users/ユーザー名/★/nuxtdemo
    이동 후 docker가 작동하는지 확인하기 위해buidl 명령을 실행합니다.
    root $ docker-compose build
    그리고build 명령이 올바른지 확인하기 위해
    docker imaages 명령을 실행합니다.
    결과는 다음과 같이 REPOSITORY 등을 표시하면 됩니다.
    root $ docker images
REPOSITORY         TAG           IMAGE ID       CREATED             SIZE
nuxtdemo_front     latest        9043ea43445d   21 minutes ago      116MB
nuxtdemo_api       latest        9cd48bec61b8   21 minutes ago      658MB
    확인 후 Rails 애플리케이션을 제작합니다.
    root $ docker-compose run --rm api rails new . -f -B -d postgresql --api
    순조롭게 제작된 상황에서 rails와 DB를 연합하기 위해 아래 파일을 업데이트합니다
    docker 환경이 업데이트되면 DB를 만드는 명령을 실행합니다.
    api/config/database.yml
    default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: db            # 追加
  username: postgres  # 追加
  password: <%= ENV["POSTGRES_PASSWORD"] %>  # 追加

    root $ docker-compose build
root $ docker-compose run --rm api rails db:create
    이 작업을 수행하면 다음과 같이 표시됩니다.
    root $ docker-compose run --rm api rails db:create
Creating nuxtdemo_api_run ... done
Created database 'app_development'
Created database 'app_test'
    DB를 만든 후 docker 환경을 시작합니다.
    root $ docker-compose up api
    이렇게 하면 다음과 같이 나타날 것이다.
    nuxtdemo_db_1 is up-to-date
Creating nuxtdemo_api_1 ... done
Attaching to nuxtdemo_api_1
api_1    | => Booting Puma
api_1    | => Rails 6.0.4.1 application starting in development
api_1    | => Run `rails server --help` for more startup options
api_1    | Puma starting in single mode...
api_1    | * Version 4.3.10 (ruby 2.7.1-p83), codename: Mysterious Traveller
api_1    | * Min threads: 5, max threads: 5
api_1    | * Environment: development
api_1    | * Listening on tcp://0.0.0.0:3000
api_1    | Use Ctrl-C to stop
    이러한 디스플레이를 확인한 상태에서 방문http://localhost:3000/을 시도합니다.
    이렇게 하면 아래 화면을 표시할 수 있다.
    이렇게 되면 Rails API 환경 제작이 완료됩니다.

    환경을 만들다


    Nuxt 환경을 계속 만듭니다.
    대상http://localhost:8080/의 URL에 표시된 화면은 다음과 같습니다.

    터미널에서 다음 명령을 실행합니다.
    root $ docker-compose run --rm front yarn create nuxt-app app
    명령을 처리하는 동안'환경 방법'을 선택할 수 있는 상태입니다.
    하지만 아무 생각 없이 리턴 버튼으로 쳐도 상관없다.
    그래서 이번 결정은 다음과 같다.
    create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in app
? Project name: app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git
    방금 명령이 실행되었는지 확인한 후 생성된 파일을 이동합니다.
    root $ mv front/app/{*,.*} front
root $ rmdir front/app
    파일 이동이 끝나면front/Docker file을 업데이트합니다.
    (처음 "#"을 삭제하십시오.)
    front/Dockerfile
    COPY package*.json ./
RUN yarn install
COPY . ./
RUN yarn run build
    Docker file을 다시 썼기 때문에build을 다시 썼습니다.
    root $ docker-compose build
    이후 up으로 시작하여 방문http://localhost:3000/과http://localhost:8080/를 시도합니다.
    root $ docker-compose up
    http://localhost:8080/의 디스플레이는 다음과 같이 Nuxt 환경의 준비가 완료되었습니다.
    수고하셨습니다!

    [기타] 공통 Docker 명령


    # dockerのイメージを作成する。
root $ docker-compose build

# docker内のnuxt yarn install
root $ docker-compose run --rm front yarn install

# docker内のrails bundle install
root $ docker-compose run --rm api bundle install

# docker環境の立ち上げ
root $ docker-compose up

# dockerのコンテナの停止・削除を一度に行う
root $ docker-compose down

# Dockerイメージを確認する
root $ docker images

# Dockerイメージのうち、noneタグのイメージを削除
root $ docker rmi $(docker images -f 'dangling=true' -q)

    [기타] 참고 자료


    https://blog.cloud-acct.com/posts/u-create-docker-compose
    https://qiita.com/rikuya11s/items/3c832801e52e980c5b74
    TIL84. 리덕스 미들웨어
    SSH 터널을 통한 SFTP 연결

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage