이번 맑고 무직이 된 3명으로 Web 서비스를 작성했으므로, 비망록을 겸해 정리해 갑니다.
Qiita 첫 투고로 잡는 곳도 있다고 생각합니다만, 용서해 주세요.

Which 개발에 대한 이야기는 여기 ⇨ Note

제작에 약 1개월 정도 걸려, 고생한 일도 많았습니다.
이 장에서는 환경 구축의 부분을 써 갑니다.
구현에 대해서는 실장편 를 봐 주세요.

만든 것

Which
두 이미지 중 하나를 선택하는 간단한 설문지를 익명으로 게시할 수 있는 엔터테인먼트 서비스

사용한 기술

인프라

VPS

DreamHost 을 이용하고 있습니다.

Firebase

계정 관리 및 스토리지를 사용하고 있습니다.

백엔드

Nuxt.js(express)

Nuxt.js의 serverMiddleWare를 사용하여 API 서버로도 작동합니다.

프런트 엔드

Nuxt.js(Vue.js)

웹 개발 초보자이므로 개발 비용이 낮을 것 같은 Nuxt.js를 선정했습니다.

다른 다양한 라이브러리를 사용하고 있습니다. 다음 장 「실장편」에서 설명합니다.

환경 구축 (VPS)

DreamHost를 이용하는 데 있어서, 곳곳에 집착한 부분을 모아 갑니다.

VPS 이용 개시까지

여러가지 정보 입력하고 바삭바닥 이용 개시! 라고 생각해…

어쨌든 계정이 승인을 기다리고있는 모습.
클레카의 이미지를 업로드해야하기 때문에 아래 단계에 따라 업로드.

카드의 머리와 뒤의 4 자리를 보이도록 중간 8 자리를 숨기고 클레카의 이미지를 촬영

지원에서 이전 이미지를 업로드

What do you need help with?의 드롭다운에서 "Billing"을 선택

연락 수단은 「Submit ticket」을 선택

이미지만 업로드하고 Submit!

후일(이번은 8시간 후), 이하의 메일이 와, 맑고 이용 가능하게!

도메인 설정, MySQL 설정

DreamHost GUI에서 쉽게 설정할 수 있으며 막히지 않았습니다.

Node 설치

공식 절차서 대로 nvm을 설치하고 Node를 설치했습니다.

포트 포워딩

DreamHost의 VPS는 Apache나 Nginx를 선택하는 것이 이미 동작하고 있는 환경에서, 대원의 config 파일로부터 여러가지 설정하는 것은 무리인 것 같다.

여러가지 조사한 바, DreamHost의 GUI로부터 설정할 수 있는 것이 판명, 이하와 같이 설정

ADVANCED> Mongrel and Proxy 페이지 하단에서 건너 뛰고 싶은 URL과 포트를 설정하십시오.

Nuxt.js의 어플리케이션을 8000번대 이후의 포트로 동작하도록 설정

동작 확인

어플리케이션이 움직이는 것을 확인할 수 있었으므로, 나머지는 구현만! 그렇다면 다음 장에 계속됩니다.