반응형
Vue.js 앱을 컨테이너화하는 방법
Chrome의 http://172.17.0.2:8080/에서 로컬로 사이트에 접속할 수 없어 "172.17.0.2가 응답에 너무 오래 걸렸습니다"라고 표시됩니다.
inspect 명령어를 사용하여 컨테이너의 IP 주소를 취득했습니다.
docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} e83c95d05d63
사용한 run 명령어.
docker run -it -p 8080:8080 --name portfolio-vue portfolio-vue:v1
그리고 나의 도커 파일
FROM node:7.7-alpine
ADD package.json /tmp/package.json
RUN cd /tmp && npm install
RUN mkdir -p /opt/portfolio-vue && cp -a /tmp/node_modules /opt/portfolio-vue-app
WORKDIR /opt/portfolio-vue
COPY . /opt/portfolio-vue
EXPOSE 8080
CMD ["npm", "start"]
기본 vue-cli 설정에서는npm start
(사용하는 명령어)는npm run dev
.
다시 말씀드리지만 기본적으로는npm run dev
는 localhost에만 바인드됩니다.
더하다--host 0.0.0.0
고객님께webpack-dev-server
줄을 서다package.json
따라서 도커 컨테이너 외부에서 액세스할 수 있습니다.
출처:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
예를 들면 ()add --host 0.0.0.0
):
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
주의: 추측하건대, 당신이CMD ["npm", "start"]
개발 또는 디버깅을 위해 컨테이너를 만듭니다.운용을 목표로 하고 있는 경우는 번들의 생성을 검토할 필요가 있습니다.npm run build
생성된 파일을 nginx와 같은 HTTP 서버에서 직접 처리합니다(도커에서도 작성 가능).
언급URL : https://stackoverflow.com/questions/49758077/how-to-containerize-a-vue-js-app
반응형
'programing' 카테고리의 다른 글
x264 C API를 사용하여 일련의 이미지를 H264로 인코딩하려면 어떻게 해야 합니까? (0) | 2022.07.06 |
---|---|
크기를 확인하거나 범위를 벗어나지 않고 문자열의 첫 번째 n자를 가져오려면 어떻게 해야 합니까? (0) | 2022.07.05 |
vuex 스토어에서 상태를 지우려면 어떻게 해야 합니까? (0) | 2022.07.05 |
Vue에서 이전 페이지 활성 유지 (0) | 2022.07.05 |
Vuex를 사용하여 상태 트리에서 시간 이동(롤백)을 수행하는 방법 (0) | 2022.07.05 |