[과제6-5] docker image로 NHN Cloud 인스턴스 내 웹 실행 테스트: MyMon Dev환경 세팅(웹 소스코드 도커라이징)

이제 만들었던 docker image를 사용해서

NHN Cloud 새 인스턴스에 mymon-web-docker 환경을 구축하자

 

계획

1. 새 인스턴스에 ssh 접속해서

2. 과제6-4에서 만든 docker image 가져오기

3. docker 설치

4. .env파일 vi로 만들기(url을 cb801->인스턴스의 public IP로 변경)

5. docker run으로 컨테이너 실행

 

6. 웹 접속 확인

Vue 프론트엔드: http://<NHN_CLOUD_PUBLIC_IP>:18080

Django 백엔드: http://<NHN_CLOUD_PUBLIC_IP>:15361

 

3,4,5번은 user-script로 인스턴스 생성 시 실행되도록 해도 될 것 같다.

---

docker image 가져오기

cb801에서

docker save -o mymon-web-image.tar mymon-web-image

 

scp mymon-web-image.tar ubuntu@새인스턴스IP:/home/ubuntu/

-> cb801에서 곧바로 보내기 안됨

pem키를 cb801에 가져오고 scp를 다시 진행하면 되지 않을까?

대신에 작업 끝나면 pem키는 꼭 지우기

 

[pem키 로컬->bjpark00->cb801로 이동시키기]

rsync -avz checkmate.pem bjpark00@hcon.nhnent.com:/home1/bjpark00/

rsync -avz checkmate.pem irteam@infa-testsrv-cb801:/home1/irteam/

 

[도커 이미지를 cb801->새 인스턴스로 전송]

scp -i checkmate.pem mymon-web-image.tar ubuntu@새인스턴스IP:/home/ubuntu/

 

이제 NHN Cloud 새 인스턴스에 mymon-web-image.tar가 전송되었다!

---

새 인스턴스에서

1. docker 설치

sudo apt-get update

sudo apt-get install -y \

    ca-certificates \

    curl \

    gnupg \

    lsb-release

 

sudo mkdir -p /etc/apt/keyrings

 

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \

sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

 

echo \

  "deb [arch=$(dpkg --print-architecture) \

  signed-by=/etc/apt/keyrings/docker.gpg] \

  https://download.docker.com/linux/ubuntu \

  $(lsb_release -cs) stable" | \

  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

 

sudo apt-get update

sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

 

# 설치 확인

docker --version

 

# sudo 없이 docker 실행하기

sudo usermod -aG docker $USER

재접

 

#docker image 로드

docker load -i mymon-web-image.tar

 

2. .env파일 vi로 만들기(url을 cb801->인스턴스의 public IP로 변경)

 

3. docker run으로 컨테이너 실행

docker run -it --env-file .env -p 18080:18080 -p 15361:15361 --name mymon-web-prod mymon-web-image

---

[문제1]

인스턴스 내 컨테이너 내 Django가 MYMONDB(10.*)로 접속을 시도했지만 접근이 막혀 있음

 

[MYMON 접속 time out 문제 해결]

보안그룹에 인바운드 규칙으로 15361 포트를 추가했고, env 파일에서 mymon db config를 rds에 맞게 바꿔줌

 

[문제2]

로컬 맥북에서 크롬창에 http://133.x.x.x:18080 접속 시 웹 프론트엔드가 안보임

인스턴스 내에서 docker run을 했는데 http://133.x.x.x:15361/가 빈 창으로 나옴. '사이트에 연결할 수 없음'은 아니라서 완전히 실패는 아닌 것 같음.

 

인스턴스 보안그룹에서 인바운드에 18080, 15361 포트를 열어야 할 듯하다.

하지만 현재 보안그룹 생성 및 수정 권한은 없는 상황.

---

문제를 파악하자

[현 상황]

로컬 맥북 주소: 10.a
bjpark00@hcon.nhnent.com: 로컬 맥북, cb801과 같은 사내망
cb801 주소: 10.250.b
cb801 내 컨테이너 주소: c

로컬 맥북 주소: 10.a
인스턴스 주소: 133.x.x.x
포트 22, 18080, 15361은 열어둔 상황
인스턴스 내 컨테이너 주소: d

 

[처음 내 생각]

맥북 크롬에서 http://133.x.x.x:18080 실행하면
인스턴스->컨테이너->Vue 서버가 base-vue.html을 브라우저(크롬)로 제공
최종적으로 http://133.x.x.x:18080에 웹페이지가 나옴

 

[하지만 실제 동작은 다음과 같아야 했다]

맥북 크롬에서 http://133.x.x.x:18080 실행하면
인스턴스->컨테이너->Vue 정적 파일을 Django가 서빙(Vue 컴포넌트들은 npm run build 명령으로 HTML + CSS + JS파일로 컴파일됨 -> Django가 이 파일들을 웹사이트로 제공)
최종적으로 http://133.x.x.x:18080에 웹페이지가 나옴

 

[원인]

Starting development server at http://0.0.0.0:15361/
-> 백엔드는 정상적으로 구동되고 있지만

Vue 개발 서버 (vue-cli-service serve)가 로컬 개발 전용으로 동작하고 있으며, 
Docker 컨테이너 외부에서 정상적으로 접근할 수 없다.

 

[더 구체적으로]

cb801서버 도커 컨테이너에서 실행하면 웹이 잘 보였던 이유

개발 서버는 localhost에서 실행된다.
난 컨테이너 내부에서 Vue 개발 서버를 실행했으므로 localhost는 컨테이너 내부를 의미한다.
로컬 맥북에서 http://cb801ip:18080에 접근하면
로컬 맥북, cb801은 같은 사내망이고 Docker의 -p 18080:18080으로 포트포워딩이 잘 되어 있어
로컬 맥북 -> cb801 -> 컨테이너 내부 Vue 개발 서버
연결이 원활했던 것이다.

반면 NHN Cloud 인스턴스는 맥북과 다른 네트워크에 있고
Vue 개발 서버는 일반적으로 보안상 로컬용이라 여러 이유(CORS, 환경변수 처리, 핫리로드 등)로 외부에서 잘 안 보일 수 있다.

 

[하지만 정말 어떤 이유에서 Vue 개발 서버 방식을 사용했을 때 웹 띄우기에 실패했을까?]

Django가 Vue 정적파일을 서빙하도록 만든 후 인스턴스(133.x.x.x)의 18080포트도 열어둔 상태로

내 로컬 맥북에서 크롬으로 http://133.x.x.x:18080에 접속해봤지만 여전히 웹이 안뜸.

http://133.x.x.x:15361은 잘 뜨는 것으로 보아, 내 로컬 맥북과 인스턴스를 연결하는 18080포트가 제대로 뚫리지 않았던 게 원인이지 않나 싶음.

18080포트만 제대로 뚫려 있었다면 Vue 개발 서버를 이용한 기존 방법으로도 웹을 정상적으로 띄울 수 있지 않았을까..

하지만 인스턴스의 보안그룹 인바운드 규칙에

수신

TCP

18080

IPv4

10.0.0.0/8 (CIDR)

이런 식으로 18080포트를 열어놨었다. 뭐가 문제였을까

 

생각해보니 지금처럼 정적 파일 빌드(npm run build) 방식을 사용할 땐 entrypoint.sh에

python manage.py runserver 0.0.0.0:15361 만으로 Django를 실행했다.

따라서 Django는 15361 포트에서만 서비스 중이었으므로

python manage.py runserver 0.0.0.0:18080으로 명령어를 바꿔 Django를 실행하지 않는 이상

http://133.x.x.x:18080에서 웹이 안 뜨는 건 당연한 거였다.

 

그러므로 아래 3가지 조치

• 컨테이너 내부에서 실행 중인 Vue Dev Server(http://localhost:18080에서 실행 중)를 0.0.0.0으로 바인딩해 외부에서도 컨테이너 내부 localhost에 접근 가능하도록 함
• vue.config.js에 localhost가 아닌 다른 주소에서도 접근 허용하도록 하는 devServer 설정 추가
• 인스턴스의 보안그룹 인바운드 규칙으로 10.*대역 IP의 18080포트 접속 허용

를 취했음에도

Vue 개발 서버 방식 당시 http://133.x.x.x:18080에서 웹이 안 떴던 이유는

내 맥북에서 크롬으로 http://133.x.x.x:18080에 접근할 때 사용되는 IP는 10.x.x.x가 아니기 때문이다.

만약 인스턴스의 보안그룹 인바운드 규칙으로 18080포트에 대해 10.x.x.x 허용이 아닌 0.0.0.0을 허용했다면 내 로컬 맥북에서 http://133.x.x.x:18080 접속 시 웹이 보였을 것이다.

 

로컬 맥북의 10.x.x.x는 private IP인 거고, 인터넷 접근에 사용되는 IP는 public IP이다. private IP와 public IP는 다르다.

=> 네이버에 '내IP주소확인' 시 public IP가 103.x.x.x인 것을 알 수 있다.

맥북 → (Wi-Fi, VPN 등 네트워크 인터페이스) → 인터넷 → 서버(133.x.x.x)

 

[해결책]
entrypoint.sh 수정(단, 최상위 디렉토리에서 npm run build가 수행되도록 경로 수정)

최종 entrypoint.sh

#!/bin/bash

# Python 가상환경 활성화
source /home/mymon-web-docker/venv/bin/activate

# Vue 정적 빌드
# 빌드된 정적 파일은 vue.config.js에서 main/static/ 하위로 복사되도록 설정되어 있음
npm run build

# Django 백엔드 실행
python manage.py runserver 0.0.0.0:15361

Django가, 빌드된 Vue 정적파일을 서비스하도록 설정 => base-vue.html 수정(Vue 정적파일 로딩 추가)

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue App</title>
    {% load static %}
    <link href="{% static 'js/Messages.js' %}" rel="prefetch">
    <link href="{% static 'js/chunk-vendors.js' %}" rel="preload" as="script">
    <link href="{% static 'js/app.js' %}" rel="preload" as="script">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="{% static 'js/chunk-vendors.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
  </body>
</html>

    main/urls.py의 re_path(), settings.py의 STATIC_URL 설정은 따로 건드리지 않음

---

[해결 완료]

이제 mymon-web-image 도커 이미지를 기반으로

어느 인스턴스, 어느 환경에서든 웹을 띄울 수 있다.

---

번외: docker 설치 부분을 user script로 만들기

인스턴스 생성 시 user script에 아래 내용 입력

#!/bin/bash
# ========== Ubuntu EC2 초기 설정 ==========

# 1. Docker 설치
apt-get update -y

apt-get install -y \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

mkdir -p /etc/apt/keyrings

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
    gpg --dearmor -o /etc/apt/keyrings/docker.gpg

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | \
  tee /etc/apt/sources.list.d/docker.list > /dev/null

apt-get update -y

apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

# 도커 버전 확인 로그 출력
docker --version

# 2. Docker를 sudo 없이 사용하도록 설정
usermod -aG docker ubuntu

# 메시지 출력 (스크립트가 끝나고 로그인 시 확인 가능)
echo '
============================================================
✅ Docker 설치 완료!
🚨 보안상 이유로 .env 파일은 직접 작성해 주세요:

  vi /home/ubuntu/.env

.env 예시 내용은 내부 문서나 관리자에게 문의하세요.

Docker 이미지를 빌드하고 컨테이너를 실행하려면 다음 명령어를 사용하세요:

  cd /home/ubuntu
  docker load -i mymon-web-image.tar 또는 docker pull <이미지_이름>:<태그>
  
  docker run -it --env-file .env -p 18080:18080 -p 15361:15361 --name mymon-web-prod mymon-web-image
============================================================
' >> /home/ubuntu/README_ENV.txt

chown ubuntu:ubuntu /home/ubuntu/README_ENV.txt

# 로그인 시 자동으로 메시지 출력
echo 'cat /home/ubuntu/README_ENV.txt' >> /home/ubuntu/.bashrc

 

cb801 서버에 만들어둔 docker image를 새 인스턴스에 전송

scp -i checkmate.pem mymon-web-image.tar ubuntu@새인스턴스IP:/home/ubuntu/

 

새 인스턴스에서

vi .env -> env파일 작성(보안상 user script에 넣지 않음)

docker load -i mymon-web-image.tar

docker run -it --env-file .env -p 15361:15361 --name mymon-web-prod mymon-web-image

실행

 

---

만약 새 인스턴스가 외부 인터넷과 차단된 리전에 있다면?

 

docker 설치 부분은

Docker가 이미 설치된 인스턴스를 하나의 템플릿(AWS에선 AMI, NHN Cloud에선 인스턴스 템플릿. 똑같은 환경의 인스턴스를 생성할 때 사용)으로 만들고

새 인스턴스를 그 템플릿으로 생성

 

docker image를 cb801에서 새 인스턴스로 전송하는 통로만 열어달라고 네트워크 팀에게 요청하거나,

docker image 저장소에서 docker pull할 때의 네트워크만 잠깐 허용하고 docker pull 이후 닫아버리기

---

[궁금증]

궁금증1
entrypoint.sh에
python manage.py runserver 0.0.0.0:15361 대신
python manage.py runserver 133.x.x.x:15361로 바꿔도
보안상 큰 효과를 얻지 못하나?
보안상 큰 효과는 없다. 실제 접근 제어는 ALLOWED_HOSTS, 방화벽, 인바운드 규칙, 인증 등으로 이루어져야 한다.
오히려 entrypoint.sh의 ip주소를 매번 바꿔야 한다면
docker image를 활용해 수백 군데의 리전(서버)에 웹서버 환경을 구축할 때 수백 번의 docker build를 수행해야 하므로 비효율적이다.

 

궁금증2
기존 entrypoint.sh의
node ./node_modules/@vue/cli-service/bin/vue-cli-service serve --port 18080 명령이
npm run serve 명령이랑 같나?
npm run serve는 package.json의 "scripts" 섹션에 등록된 명령어를 실행한다.
npm run serve는 결과적으로 vue-cli-service serve를 호출하므로 동일한 명령이다.

 

궁금증3
npm run serve는 localhost:8080에서 Vue 개발 서버를 실행하나?
맞다.
개발 서버는 실제 정적 파일을 만드는 게 아니라 메모리 기반 개발 빌드를 제공한다.

궁금증4
client 폴더 내에서 npm run build를 수행한 뒤 생성된 /client/dist/를 ../main/static/에 복사하는 이유는 무엇인가?
Django 프로젝트의 static/ 디렉토리에 정적파일(HTML, CSS, JS)이 위치해야 Django가 이 파일들을 웹사이트로 제공할 수 있다. Django의 설정값 중 STATICFILES_DIRS나 STATIC_ROOT 설정이 /static/ 경로로 되어 있기 때문이다.

 

궁금증5
최상위 디렉토리에서 npm run build를 수행해서 정적 파일들(dist/)을 만들어도 client/가 활용할 수 있지 않나?
package.json, vue.config.js, .env.client가 모두 최상위 디렉토리에 있다면 최상위 디렉토리에서 실행하는 게 맞다.

궁금증6
정적 빌드가 무엇인가?
정적 빌드는 npm run build 명령으로 Vue 컴포넌트들을 HTML + CSS + JS파일로 컴파일해 /dist 폴더에 넣는다.
HTML + CSS + JS파일이어야 브라우저가 직접 읽을 수 있다.

 

궁금증7
Nginx 등의 정적 파일 서버가 왜 필요한 건가?
브라우저(크롬)는 HTML, JS, CSS 파일을 요청하는데, 이때 이 파일들을 응답해주는 서버(정적 파일 서버)가 필요하다.
Vue 개발 서버는 개발자 편의용이므로 
Nginx, Apache, 혹은 Django가 이 정적 파일을 서빙하면 안정적이다. (나처럼 개발 서버만으로 여러 환경에서 테스트할 때 웹이 안 보이는 문제도 없을 것임)

 

궁금증8
현재 방식은 Vue + Django 단일 서버 통합 배포
Vue 정적 파일을 Nginx 같은 웹 서버로 서빙하고 Django는 백엔드 API 서버로 분리 운영하는 구조도 있는데,
여기서 백엔드 API 서버는 무엇인가? 프론트엔드가 API 엔드포인트(API 호출을 위한 전화번호)로 백엔드로 API 요청을 보내면 백엔드가 로직을 수행하는 곳을 의미하나?
맞다.
프론트엔드(Vue)는 유저와 직접 소통하고
백엔드(Django)는 데이터를 처리하고, DB와 통신하며 로직을 수행한다.
프론트 → API 호출 → 백엔드 → 응답 → 프론트에 반영

[사용자] 
   ↓ (http://ip주소:18080-process-list 웹 화면에서 호스트명 선택 -> 검색 요청)
[ProcessList.vue]
   ↓ (HTTP 요청)
[백엔드 API: VUE_APP_API_PROC_BASE_URL/get_processList/]
->  /get_processList/ 엔드포인트는 main/urls.py에 path('get_processList/',process_list_view.get_processList) 형태로 정의되어 있음
-> 즉  /get_processList/ 엔드포인트는 main/view/db/Monitoring/process_list_view.py의  process_list_view.get_processList 함수로 연결된다.
이 함수에서
   ↓ (SQL 쿼리 생성 및 실행)
[logdb 데이터베이스]
   ↓ (결과 반환)
[ProcessList.vue]
   ↓ (데이터 테이블 렌더링)
[사용자]

---

[기타]

docker run 도중

0.0.0.0:15361->15361/tcp, [::]:15361->15361/tcp,
0.0.0.0:18080->18080/tcp, [::]:18080->18080/tcp

PORTS의 의미

1) 0.0.0.0:15361->15361/tcp

• 왼쪽(0.0.0.0:15361): 호스트(= NHN Cloud 인스턴스)에서 열려 있는 주소/포트
• 오른쪽(15361/tcp): 컨테이너 내부의 포트

즉:

 

인스턴스의 **모든 IPv4 네트워크 인터페이스(0.0.0.0)**에서
15361/tcp로 들어오는 연결을 받아서
컨테이너의 15361/tcp로 전달한다.

 

그래서 외부에서:

• http://133.x.x.x:15361 로 오면→ 컨테이너 15361으로 들어감.

2) [::] = 모든 IPv6 인터페이스

 

3) 0.0.0.0:18080->18080/tcp

 

위 15361과 동일한 논리로:

인스턴스의 모든 IPv4 인터페이스에서

18080/tcp로 들어오는 연결을 받아

컨테이너의 18080/tcp로 전달한다.

---

"Vue 개발 서버는 일반적으로 보안상 로컬용이라 여러 이유(CORS, 환경변수 처리, 핫리로드 등)로 외부에서 잘 안 보일 수 있다."

보완 설명

Vue 개발 서버(npm run serve)를 실행했을 때, 내 컴퓨터(Localhost)에서는 잘 되는데 같은 와이파이를 쓰는 핸드폰이나 다른 팀원의 컴퓨터에서 접속하려면 접속이 안 되거나 에러가 나는 상황을 겪어보셨을 겁니다.

1. CORS (Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

한 줄 요약: "보안 요원(브라우저)이 낯선 출입자(다른 도메인)를 막아서는 것"

웹 브라우저는 보안을 위해 **"같은 출처(Origin)끼리만 데이터를 주고받아라"**는 기본 원칙(Same-Origin Policy)을 가지고 있습니다. 여기서 '출처'란 프로토콜 + 도메인 + 포트번호의 조합입니다.

• 상황:
  • 내 컴퓨터(로컬)에서 개발 서버는 localhost:8080입니다.
  • 하지만 외부(핸드폰 등)에서 접속할 때는 192.168.0.5:8080처럼 IP 주소로 들어옵니다.
• 문제:
  • 브라우저 입장에서 localhost와 192.168.x.x는 서로 다른 출처입니다.
  • 개발 서버가 "나는 localhost 외에는 데이터를 주지 않겠다"고 설정되어 있다면, 외부 기기에서 데이터를 요청할 때 브라우저가 보안상 이를 차단해 버립니다. 이것이 CORS 에러입니다.

2. 환경변수 처리 (Environment Variable Handling)

한 줄 요약: "집 주소를 '우리 집'이라고 적어놔서, 밖에서 길을 못 찾는 상황"

개발할 때는 API 주소나 DB 접속 정보 등을 소스 코드에 직접 적지 않고 .env 같은 파일에 따로 보관하는데, 이를 환경변수라고 합니다.

• 상황:
  • 개발용 환경변수 파일(.env.development)에 백엔드 API 주소를 VUE_APP_API_URL=http://localhost:3000이라고 설정했다고 가정해 봅시다.
• 문제:
  • 내 컴퓨터에서는 localhost가 '내 컴퓨터'를 가리키므로 API 호출이 잘 됩니다.
  • 하지만 **핸드폰(외부)**에서 접속하면, 핸드폰 입장에서 localhost는 핸드폰 자신을 의미합니다.
  • 결국 핸드폰은 API 서버(내 컴퓨터)가 아닌 자기 자신에게 요청을 보내게 되고, 당연히 아무것도 없으니 연결이 실패합니다. 외부 접속 시에는 localhost가 아니라 실제 IP 주소가 필요하기 때문입니다.

3. 핫리로드 (Hot Reload / HMR)

한 줄 요약: "새로고침 없이 코드를 바로 반영해 주는 기능인데, 연결 선이 짧아서 외부까진 안 닿는 것"

**핫리로드(HMR, Hot Module Replacement)**는 개발자가 코드를 수정하고 저장하면, 브라우저를 새로고침 하지 않아도 변경된 부분만 즉시 화면에 반영해 주는 아주 편리한 기능입니다.

• 작동 원리:
  • 개발 서버와 브라우저 사이에 **웹소켓(WebSocket)**이라는 실시간 통신 파이프를 연결해 둡니다.
• 문제:
  • 이 웹소켓 연결은 기본적으로 ws://localhost:8080으로 설정되는 경우가 많습니다.
  • 외부 기기(핸드폰)로 접속하더라도, 웹 페이지 내부 스크립트는 여전히 웹소켓을 localhost로 연결하려고 시도합니다.
  • 앞선 환경변수 문제와 마찬가지로, 핸드폰은 자기 자신에게 웹소켓 연결을 시도하다 실패하게 되고, 결과적으로 화면이 계속 깜빡이거나 핫리로드가 작동하지 않게 됩니다.

---

entrypoint.sh에서

npm run build 이후 Django 실행 전에 python manage.py migrate가 왜 필요한가?

보통 DB에 테이블이 없는 경우 Django가 테이블을 만들도록 한다.

하지만 지금 상황에선 테이블이 이미 만들어져 있으므로 migrate를 생략해도 되지만, Docker 컨테이너가 처음 세팅될 수도 있으므로 혹시 몰라 넣어둠.

migrate는 이미 반영된 건 다시 안하므로 남발을 걱정하지 않아도 됨

 

하지만 내가 실제 실행했을 땐

django.db.utils.OperationalError: (1050, "Table 'django_content_type' already exists")

오류 메시지 발생

Django가 migrate를 하면서 "django_content_type"이라는 테이블을 새로 만들려고 했는데,

이미 DB 안에 존재해서 에러가 발생한 것

지금 상황(DB가 이미 존재)이라면 python manage.py migrate 명령은 없는 게 나아보인다.

---

deprecated

[시행착오1]

가설: 프론트/백이 모두 하나의 포트만을 사용해야 한다?

=> 이렇게 안해도 은빈님은 18080포트로도 웹이 보인다.

 

[시행착오2]

.env파일에

VUE_DEV_SERVER=http://localhost:8080을

VUE_DEV_SERVER=http://133.x.x.x:18080로 수정

 

vue.config.js에

devServer: {

        host: '0.0.0.0',  // localhost 대신 모든 인터페이스에 바인드

        port: 18080,

        allowedHosts: ['all'], 

        disableHostCheck: true  // localhost가 아닌 다른 주소에서도 접근 허용

    },

로 수정

 

entrypoint.sh에

node ./node_modules/@vue/cli-service/bin/vue-cli-service serve --host 0.0.0.0 --port 18080으로 수정

 

=> 하지만 보안그룹 인바운드 규칙에 18080포트 추가해도 해결 안됨

 

[시행착오3]

보안그룹 인바운드 규칙에 18080포트 추가하고

 

.env파일에

VUE_DEV_SERVER=http://localhost:8080을

VUE_DEV_SERVER=http://133.x.x.x:18080로 수정

 

vue.config.js는 그대로
devServer: {

    },

 

entrypoint.sh에

node ./node_modules/@vue/cli-service/bin/vue-cli-service serve --host 0.0.0.0 --port 18080으로 수정

 

[시행착오4]

Dockerfile에

 

추가

 

entrypoint.sh에

export HOST=0.0.0.0

export VUE_CLI_HOSTNAME=0.0.0.0

추가

 

vue.config.js에서

.public(process.env.VUE_DEV_PUBLIC_URL)

제거