Docker에서 React 개발 환경 만들기
12073 단어 DockerReactcreate-react-app
Docker
일본어 문서
Docker는 개발자와 시스템 관리자가 응용 프로그램을 개발, 이동 및 실행하는 플랫폼입니다.
같은 개발 환경에서 개발할 수 있도록 팀 내에서 도와주는 응용 프로그램인 것 같다.
용어
컨테이너
응용 프로그램을 실행하는 개발 환경.이미지의 정보에 따라 구축됩니다.
형상
컨테이너의 원천이 되다.용기 안의 정보를 저장했습니다.
Dockerfile
이미지 내용을 설명하는 파일입니다.이미지를 바탕으로 하다.구축할 때 Dockerfile에 설명된 정보를 기반으로 이미지를 생성합니다.
총결산
컨테이너
응용 프로그램을 실행하는 개발 환경.이미지의 정보에 따라 구축됩니다.
형상
컨테이너의 원천이 되다.용기 안의 정보를 저장했습니다.
Dockerfile
이미지 내용을 설명하는 파일입니다.이미지를 바탕으로 하다.구축할 때 Dockerfile에 설명된 정보를 기반으로 이미지를 생성합니다.
총결산
실제로 써볼게요.
Docker 설치
용설란주 주세요!😊😊😊
Docker에서 실행되는 응용 프로그램 만들기
우선, 용기 안에서 실행되는 프로그램을 로컬에서 만듭니다.
terminal$ npx create-react-app docker-practice
$ cd docker-react-example
$ yarn start
이런 거 나오면 오케이.
문서 파일 쓰기
컨테이너의 내용을 쓰다.
terminal$ touch Dockerfile
Dockerfile# ベースイメージの作成
FROM node:12.16.1
# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app
# package.jsonとyarn.lockを/usr/src/appにコピー
COPY ["package.json", "yarn.lock", "./"]
# パッケージをインストール
RUN yarn install
# ファイルを全部作業用ディレクトリにコピー
COPY . .
# コンテナを起動する際に実行されるコマンド
ENTRYPOINT [ "yarn", "start" ]
각종 명령 해설
FROM
Dockerfile에 필요한 명령입니다.
Docker Hub에서 기본 이미지를 가져옵니다.
이번에 노드의 12.16.1을 얻었다.
WORKDIR
컨테이너의 작업 디렉토리를 지정합니다.루트와 usr에는 다양한 기본 파일이 있기 때문에 그곳을 피하는 것이 좋습니다.
COPY
컨테이너에 로컬 파일 복사
문법
1.COPY<출처>...<대상 >
2. COPY["<소스>,..."<대상>]
임의로 하다
RUN
구축할 때만 실행되는 명령(?)입니다.
하면, 만약, 만약...👍
ENTRYPOINT
용기가 시작될 때 실행합니다.
유사한 명령에는 CMD가 있는데, 여기서 설명하면 만리장성이 길어지기 때문에 사랑을 베는 것이다
왜 패키지야?json과 yarn.락부터 복사할까요?
기준 이 문장
docker는 구축을 시작할 때 Docker daemon에 Dockerfile 디렉터리의 모든 파일tar
을 보냅니다.
이게 크면 tar는 시간이 필요해요.
이렇게 용기 안에 포장 일람과 버전 의존 관계가 적힌 파일만 복사한 후 용기 안에 설치하는 것이 빠르다!!!
이미지 구축
명령의 문법은 이렇다
- docker build "옵션"경로
terminal$ docker build -t test:1.0 ./
-t는 이름과 라벨을 지정할 수 있다(tag는 버전 같은 녀석)
지정하지 않으면 이름이 됩니다:latest (가능성)
또한 제작된 이미지
terminal$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
test 1.0 335dbb73b720 40 seconds ago 1.22GB
node 12.16.1 d834cbcf2402 5 weeks ago 916MB
항목에서 사용할 수 있는 모든 패밀리를 봅니다.
시작 컨테이너
생성된 이미지를 기반으로 용기를 시작합니다!
명령 구문
- 올가미 규칙 [옵션] 이미지 [명령] [매개변수...]
terminal$ docker run -it --name sample -p 3000:3000 -v $PWD:/usr/src/app test:1.0
terminalCompiled successfully!
You can now view docker-react-example in the browser.
Local: http://localhost:3000
On Your Network: http://172.17.0.2:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
이렇게 나와요.
액세스 http://localhost:3000
이런 화면이 나오면 성공한다.
자세한 내용을 확인한 후
src/App.jsimport React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Dockerの勉強やでーwwww
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn Ruby on Rails
</a>
</header>
</div>
);
}
export default App;
변경 사항이 실시간으로 반영될 겁니다.
옵션 설명
-it
단숨에 - i와 - t 옵션을 지정했습니다.
-t 가상 터미널에 할당
-i 부착되지 않아도 stdIN이 계속 열립니다.
-p
컨테이너 포트와 호스트 포트 연결
호스트: 컨테이너 순서에 따라 지정되기 때문에 이번 호스트 3000은 컨테이너 3000과 연결됩니다.
-v
호스트 파일 경로: 컨테이너 파일 경로에 지정
volume의 줄임말.호스트의 파일을 컨테이너의 디렉토리에 마운트합니다.
호스트에서 이루어지는 파일의 변경을 컨테이너에서 이루어지는 것처럼 보일 수 있습니다.
이로써 파일의 차이점이 자동으로 실현되었다.
--name
컨테이너 이름 지정
이번에는 샘플로 지정했습니다.
--rm(경품)
-rm를 더하면 컨테이너를 정지할 때 자동으로 삭제됩니다.
이렇게 하면 호스트가 용기로 가득 차는 것을 방지할 수 있다.
시작 중인 컨테이너 진입
docker exec에서 시작 중인 용기에 들어갈 수 있습니다.
문법
terminaldocker exec [オプション] コンテナ コマンド [引数...]
terminal$ docker exec -it sample bash
root@fe248383642c:/usr/src/app#
root@fe248383642c:/usr/src/app# ls
Dockerfile docker-command.md docker-compose.md dockerfile.md node_modules package.json public src yarn.lock
root@fe248383642c:/usr/src/app#
# exitで抜けることが出来ます。
root@fe248383642c:/usr/src/app# exit
exit
$
너는 이렇게 서류를 괴롭힐 수 있다.
시작 중인 컨테이너 나열
docker ps로 할 수 있어요.
- a 옵션을 추가하면 정지 중인 용기도 나온다.
terminal$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 13 minutes
$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 4 minutes 0.0.0.0:3000->3000/tcp sample
bac4be724af7 docker-ruby_ruby "irb" 39 hours ago Exited (1) 18 hours ago ruby
c2346fe966a2 test "yarn start example" 2 days ago Exited (1) 24
(中略)
용기 정지
dockerstop 용기 이름을 사용할 수 있습니다.
terminal$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 13 minutes 0.0.0.0:3000->3000/tcp sample
$ docker stop sample
sample
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
$
컨테이너 재부팅
docker restart 용기 이름을 사용할 수 있습니다.
terminal$ docker restart sample
sample
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 7 seconds 0.0.0.0:3000->3000/tcp sample
끝날 때
자주 쓰는 명령 같은 걸 접했나 봐요.
Docker의 내부 구조를 잘 이해하지 못하기 때문에 다른 기사에서 내보내려고 합니다.
Reference
이 문제에 관하여(Docker에서 React 개발 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tanaka-tt/items/49628cd423e490120eeb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npx create-react-app docker-practice
$ cd docker-react-example
$ yarn start
$ touch Dockerfile
# ベースイメージの作成
FROM node:12.16.1
# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app
# package.jsonとyarn.lockを/usr/src/appにコピー
COPY ["package.json", "yarn.lock", "./"]
# パッケージをインストール
RUN yarn install
# ファイルを全部作業用ディレクトリにコピー
COPY . .
# コンテナを起動する際に実行されるコマンド
ENTRYPOINT [ "yarn", "start" ]
$ docker build -t test:1.0 ./
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
test 1.0 335dbb73b720 40 seconds ago 1.22GB
node 12.16.1 d834cbcf2402 5 weeks ago 916MB
$ docker run -it --name sample -p 3000:3000 -v $PWD:/usr/src/app test:1.0
Compiled successfully!
You can now view docker-react-example in the browser.
Local: http://localhost:3000
On Your Network: http://172.17.0.2:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Dockerの勉強やでーwwww
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn Ruby on Rails
</a>
</header>
</div>
);
}
export default App;
docker exec [オプション] コンテナ コマンド [引数...]
$ docker exec -it sample bash
root@fe248383642c:/usr/src/app#
root@fe248383642c:/usr/src/app# ls
Dockerfile docker-command.md docker-compose.md dockerfile.md node_modules package.json public src yarn.lock
root@fe248383642c:/usr/src/app#
# exitで抜けることが出来ます。
root@fe248383642c:/usr/src/app# exit
exit
$
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 13 minutes
$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 4 minutes 0.0.0.0:3000->3000/tcp sample
bac4be724af7 docker-ruby_ruby "irb" 39 hours ago Exited (1) 18 hours ago ruby
c2346fe966a2 test "yarn start example" 2 days ago Exited (1) 24
(中略)
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 13 minutes 0.0.0.0:3000->3000/tcp sample
$ docker stop sample
sample
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
$
$ docker restart sample
sample
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
fe248383642c test:1.0 "yarn start" 24 hours ago Up 7 seconds 0.0.0.0:3000->3000/tcp sample
Reference
이 문제에 관하여(Docker에서 React 개발 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tanaka-tt/items/49628cd423e490120eeb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)