Docker에 nginx, Rails 및 Vue 환경을 만듭니다.

캘린더에 구멍이 비었기 때문에 구멍 채우기에 참가했습니다. 다이빙 참가 & 잡아 기사가 됩니다만 용서해 주십시오.

가정

최근 XD가 너무 편리해서 jQuery에서 프론트를 움직이는 것이 힘들어졌기 때문에 Vue 도입하기 위해 공부를 시작했습니다.
요즈음의 javascript는 javascript의 주제에(※인식이 낡은)패키지 관리라든지가 필요 없을 정도로 파일이 증가해 번거롭기 때문에 Docker로 움직이기로 했습니다. 옛날에는 table치카치카시키는 것만 같은 사용할 수 없는 아이였는데 너.



이 그림 필요하십니까?

Rails에서 API를 만들고 Vue에서 그것을 참조한다고 가정합니다.
Rails라면 폐사의 엔지니어는 대체로 쓸 수 있고, 디자이너씨도 pug 쓸 수 있고 sass 쓸 수 있고, 상당히 편하게 도입할 수 있는 것과 다르다? 라는 달콤한 견적에 의해 이 구성으로 했습니다.

파일 구성

/project
  .docker-compose
  server
    Dockerfile
    Gemfile
    Gemfile.lock
    Rakefile
    app ほか
  client
    Dockerfile
  data
    www

/project/data/www 아래에 Vue 파일이 들어 있습니다. Rails의 포트를 3000번에, Vue를 80번에 연결한다.

이 기간은 수수한 작업이므로 할애합니다. API와 Vue 컴포넌트를 쓰레기 쓰겠습니다.
일하는 동안의 부끄러움 : Docker의 Vue에서 Docker의 swaggerAPI를 두드리고 싶습니다 - teratail
CORS도 아니야? 404 왜? ! 브라우저에서 열 수 있습니까? ! 와서 teratail에 갔습니다만, 소스에 post라고 써 있었을 뿐이었습니다. get에 다시 쓰면 보통 CORS가 나왔다. 부끄러운 죽음

CORS 발생

그렇다. 포트 다른 것.
이것을 회피하려고 조사하고 있으면, 아무래도 nginx를 넣어 프록시 서버로 해 주면 좋다.

docker-compose.yml

  nginx:
    build: ./nginx
    ports:
      - '9000:9000'
    volumes:
      - ./nginx/server.conf:/etc/nginx/nginx.conf
    links:
      - server
      - client

nginx.conf

  server {
    listen 9000;
    server_name localhost;
    location / {
        proxy_pass  http://server:3000;
        proxy_set_header Host localhost;
        add_header Access-Control-Allow-Origin http://localhost;
        add_header Access-Control-Allow-Methods "POST, GET, PUT, PATCH, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
    }
  }

그래서 Vue에서 Rails의 API에서 데이터를 검색하여 화면을 볼 수있었습니다! 했어요!

이 후, CSRF로 피의 거품을 불는 것은 또 다른 이야기……(※미해결)
토끼에도 코너에도 보안은 클리어하지 않으면 업무에 도입할 수 없기 때문에 앞으로도 노력하겠습니다. 접속처 IP가 고정이 되면 그것으로 좋은 생각도 하고 있습니다만… … 인프라 지식은 (도) 없다…

Q.VueCLI를 선택한 것이 나쁜 것은?
A.erb 싫어서 jQuery 김에 폭살하고 싶었어…

일하는 동안 신세를졌습니다.

docker-compose를 사용하여 nginx에서 Vue 애플리케이션을 실행합니다.
docker-compose를 사용하여 Vue.js 프로젝트를 만들고 Docker로 이동해 보았습니다.
vue.js에서 윈도우를로드 할 때 함수를 실행하고 싶을 때 작성하는 방법
docker의 nginx에서 다른 컨테이너의 웹으로 역방향 프록시
Nginx에서 역방향 프록시를 설정하는 방법