전단 개발 환경 구축 - docker 편

통 증 해결

전단 정적 환경 구축 면제

분기 전환, 컴 파일 재 시작 package.json 또는 gulpfile.js 파일 변경 제외)

nginx 자체 적 으로 배치 하여 서로 다른 프로젝트 의 수 요 를 만족 시 킬 수 있다

2. 전단 정태 구축 사고ubuntu 시스템 환경 을 바탕 으로 nginx 정적 자원 서버 가 docker 노출 된 포트 를 통 해 전송 을 요청 합 니 다. 그러면 백 엔 드 개발 기 위 에 설치 docker 만 하면 전단 의 정적 자원 에 접근 할 수 있 고 전단 개발 기 에 접근 할 필요 가 없습니다.
3. 구체 적 인 해결 방안

Kitematic 클 라 이언 트 로 크로스 플랫폼 에서 Docker

를 실행 합 니 다.

Docker 의 파일 을 포트 로 미리 보기

nginx + 포트 맵 으로 Docker 의 파일 편집

일반적인 이미지 (미 러) 설정

이 안 에는 몇 가지 개념 이 있 으 니 먼저 설명해 야 한다.
우선 Kitematic 은 하나 Docker GUI 로 배치 가 매우 편리 하 다.
그 다음으로 Docker 에서 가장 중요 한 세 가지 개념 은 Container (용기), Image (미 러), Volume (볼 륨) 이다.
Image 는 정적 내용 입 니 다. 어떤 Image 를 뛰 려 면 Container 가 필요 합 니 다.이 안 에는 중요 한 것 이 있 습 니 다. Container 에서 변경 한 것 은 Image 에 저장 되 지 않 습 니 다.변경 사항 을 저장 하려 면 간단 합 니 다. 실행 docker commit ContainerID TAG 하면 됩 니 다. git 와 유사 한 commt 입 니 다.
사용 하지 않 으 려 면 commit 파일 을 저장 하고 싶 으 면 docker 도 Volume 을 사용 하 는 방법 을 제공 합 니 다.
Volume 은 데 이 터 를 저장 하 는 폴 더 입 니 다. Image 를 시작 할 때 하나 이상 의 Volume 을 마 운 트 할 수 있 습 니 다. Volume 의 데 이 터 는 Image 에 독립 되 어 있 으 며 재 부팅 할 때 잃 어 버 리 지 않 습 니 다.
마지막 으로 포트 맵.앞에서 말 했 듯 이 Docker 는 가상 컴퓨터 로 볼 수 있 습 니 다. 모든 파일 이 안에 있 습 니 다.만약 당신 이 Container 에서 서버 를 실행 하고 감청 127.0.0.1:8000 을 한다 면, 당신 의 기계 에서 직접 방문 http://127.0.0.1:8000 해 서 는 안 됩 니 다. 왜냐하면 Container 와 당신 의 기 계 는 서로 다른 환경 이기 때 문 입 니 다.
그럼 어 떡 하지?우 리 는 먼저 모두 가 잘 아 는 문 제 를 보 자.
일상적인 개발 에서 우 리 는 항상 동료 에 게 웹 페이지 효 과 를 미리 볼 수 있 도록 해 야 한다. 자주 사용 하 는 방법 은 감청 0.0.0.0:8000 한 다음 에 동료 에 게 같은 랜 을 연결 시 켜 방문 http://你的机器IP:8000 하면 된다.
Container 의 문 제 는 매우 비슷 하 다. 단지 우리 자신 이 '동료' 가 되 었 을 뿐 Docker 내부 홈 페이지 를 방문 해 야 한다.컨테이너 IP 만 받 으 면 문제 가 해 결 될 것 같 습 니 다.
다행히 Container 에는 IP 가 있 었 다.
통상 적 으로 이 IP 는 192.168.99.100 (Kitematic 를 이용 하여 docker 를 시작) 이 며, Container 의 홈 호스트 (즉 Docker 를 실행 하 는 기계) 에서 만 접근 할 수 있 습 니 다.그러나 Container 의 경우 IP 만 연결 되 어 있 고 포트 는 연결 되 어 있 지 않다.따라서 Container 내부 의 포트 (예 를 들 어 8000) 에 접근 하려 면 포트 맵 을 수 동 으로 설정 하고 Container 내부 의 포트 를 IP 에 표시 해 야 합 니 다.
착수 하 다
1. 다운로드 Docker ToolboxDocker Toolbox 는 Windows 와 Mac OS 를 지원 합 니 다. 홈 페이지 에 다운로드 하여 설치 할 수 있 습 니 다. 시간 이 많이 걸 리 므 로 좋 은 가방 을 직접 찾 는 것 을 권장 합 니 다.
설치 가 끝 난 후 Kitematic 를 열 고 Docker Hub 계 정 을 등록 하여 다음 작업 을 편리 하 게 합 니 다.
2. 미 러 다운로드 UbuntuKatematic 에서 의 검색 Ubuntu
두 번 째 줄 의 첫 번 째 를 선택 하고 create 단 추 를 누 르 십시오.
여기에 한 마디 를 꽂 으 면 fuck GFW 100 M 의 파일 을 두 시간 동안 다운로드 할 수 있 고 취 했다.
다운로드 가 완료 되면 Kitematic 왼쪽 Container 목록 에서 ubuntu 를 선택 한 다음 위 에 있 는 'START' 단 추 를 눌 러 실행 합 니 다."EXEC"를 누 르 면 시스템 명령 행 에 들 어 갈 수 있 습 니 다. su 를 입력 하여 루트 권한 을 엽 니 다.
이때 Kitematic 오른쪽 상단 에 있 는 'Settings' 를 클릭 하고' Ports' 를 클릭 하면 보통 192.168.99.100 의 IP 주 소 를 볼 수 있다.자신의 컴퓨터 를 켜 는 명령 행 에 ping 192.168.99.100 을 입력 하면 통 할 것 입 니 다.
3. 일반적인 초기 화 작업
슬 래 그 다운로드 속도 가 지 겨 워 서 원본 을 바 꾸 기로 했 습 니 다.중과 대의 원천 을 채택 하 였 으 니 아 리 운 의 원천 을 시험 해 보 세 요. 속도 가 모두 좋 습 니 다 ~

sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
apt-get update

필요 한 편집기 설치 및 경로 보완: apt-get install vim bash-completion다른 도 구 는 스스로 추가 할 수 있다.
4. nginx 및 nvm 설치nvm 는 node 버 전 관리자 로 여러 node 버 전 관 리 를 할 수 있 습 니 다.
루트 권한 을 여 는 터미널 입력:

apt-get update
apt-get install nginx
apt-get install curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
source ~/.bashrc
nvm install node

설치 가 완료 되 었 습 니 다. nginx 설정 을 하 느 라 바 쁘 지 않 습 니 다. 데이터 볼 륨 을 마 운 트 한 후에 nginx 설정 파일 을 수정 해 야 합 니 다.nvm 국내 타 오 바 오 소스 를 사용 할 수 있어 속도 가 빠르다.
5. 이미지 내 보 내기
mac 플랫폼 에서 Katematic 를 직접 조작 하여 포트 맵 설정 을 할 수 있 지만 windows 플랫폼 에 서 는 命令行 을 통 해 만 설정 할 수 있 습 니 다.마 운 트 볼 륨 은 현재 命令行 를 통 해서 만 설정 할 수 있 습 니 다.이런 상황 을 바탕 으로 우 리 는 命令行 을 통일 적 으로 이용 하여 배치 합 니 다.
우선 commit.Kitematic 왼쪽 하단 "DOCKER CLI"를 클릭 하여 실행:docker ps
다음 과 같은 출력:

➜  ~ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                                                                                      NAMES
b357a78dc95e        f753707788c5        "/bin/bash"         3 days ago          Up 4 seconds        0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:8080->8080/tcp, 0.0.0.0:8088->8088/tcp   iwjwdocker

copy 출 container id, 여 기 는 b357a78dc95e 입 니 다.
그리고 실행: docker commit b357a78dc95e username/imagename다음 이미지 내 보 내기docker export b357a78dc95e -o ubuntu.tar
개인 목록 을 보십시오.mac 위 에 /Users/你的用户名 파일 을 찾 을 수 있 습 니 다.
다음은 이 이미지 위 에 전체 설정 을 위 한 이미 지 를 새로 만 들 것 입 니 다.
6. 포트 맵 및 마 운 트 볼 륨 설정
설정 프로 세 스:

Kitematic 에서 왼쪽 아래 "DOCKER CLI"를 클릭 하여 Docker 명령 행 열기

명령 docker import 를 입력 하고 폴 더 에서 ubuntu 파일 을 명령 행 으로 끌 어 옵 니 다. (ubuntu 파일 경로 에 중국어 가 있 으 면 안 됩 니 다. 있 으 면 다른 순수한 영어 경로 의 폴 더 로 파일 을 이동 합 니 다)

명령 docker images 를 입력 하고 미 러 를 복사 하 는 IMAGE ID (b357a78dc 95e 와 유사)

가장 중요 한 단계, 입력 명령:

docker run -t -i --privileged -p 80:80/tcp \
    -p 443:443/tcp -p 8088:8088/tcp \
    -p 8000:8000/tcp -p 8080:8080/tcp -d --name iwjw \
    -v /Users/aaaa/test:/static \
    -v /Users/aaa/nginxconf:/etc/nginx/sites-enabled \
    -v /Users/aaa/www:/www  IMAGEID \
    /bin/bash

위의 명령 행 을 설명 하 십시오.

ubuntu.tar: docker 는 TCP 프로 토 콜 을 바탕 으로 80 포트 노출

-p 80:80/tcp: Katematic 에 이 이미지 의 이름 을 표시 합 니 다 --name iwjw

iwjw: 이 폴 더 를 docker 내 Ubuntu 시스템 의 -v /Users/aaaa/test:/static 폴 더 에 마 운 트 합 니 다.쉽게 말 하면 docker 명령 행 에 /Users/aaaa/test 폴 더 에 들 어가 서 홈 호스트 (본인 컴퓨터) 의 /static 폴 더 에 접근 할 수 있 습 니 다.

주의: 마 운 트 /static 이 폴 더 는 정적 자원 코드 를 저장 하 는 데 사 용 됩 니 다. 마 운 트 /Users/aaaa/test 는 설정 파일 을 작성 하 는 데 사 용 됩 니 다. 마 운 트 /Users/aaaa/test 는 자동화 스 크 립 트

를 저장 할 수 있 습 니 다.
80 포트 를 사용 하려 면 /Users/aaa/nginxconf 폴 더 에 있 는 nginx 파일 을 삭제 해 야 합 니 다. /Users/aaa/www 파일 에는 80 포트 에 대한 기본 설정 이 존재 합 니 다. (root 를 이용 한 설정)
7. 자신의 프로젝트 에 따라 개성 화 된 설정 을 한다.
개인 설정:

nginx

스 크 립 트 작성 을 실행 합 니 다. sites-enabled 폴 더 에 넣 어 관리 하 는 것 을 고려 할 수 있 습 니 다.

셸 스 크 립 트 는 다음 과 같 습 니 다:

function init() {
  nginx
  npm install gulp -g
  npm install
}
# 打开命令行提示

echo " -aaainit 进入 aaa 文件夹，并初始化aaa项目"
echo " -aaa 进入 aaa 文件夹，并初始化aaa项目"
echo " -h 帮助"

while [ -n "$1" ]
do
    case "$1" in
    "-aaainit")
        echo "进入 aaa 文件夹，并初始化运行 aaa 项目"

        cd /static/aaa
        init
        npm run start

        ;;
    "-aaa")
        echo "进入 aaa 文件夹，并运行 aaa 项目"

        cd /static/aaa
        npm run start

        ;;

    "-h")
        echo " -aaainit 进入 aaa 文件夹，并初始化aaa项目"
        echo " -aaa 进入 aaa 文件夹，并初始化aaa项目"
        echo " -h 帮助"
        ;;
    esac
    shift
done

결어
기본적으로 위의 docker 설정 을 완성 하면 백 엔 드 는 전단 코드 의 분기 에서 자신의 인터페이스 테스트 를 할 수 있 습 니 다.
docker 를 도입 하면 앞 뒤 연결 시간 을 크게 줄 여 개발 진 도 를 가속 화 할 수 있다.
이 글 은 양 걸 이의 이 Docker 로 전단 개발 환경 을 빠르게 설정 해 개발 한 것 으로, 이 글 을 먼저 읽 어 보 는 것 을 권장 합 니 다.