# 다른 기본이미지에 이미지를 구축할 수 있게한다.
# 이 이미지를 기반해 컨테이너를 실행했기 때문에 현재 로컬 컴퓨터에도 존재한다.
# 이 Docker 허브 이미지에 기반한 컨테이너를 처음으로 실행했을 때 이 이미지는 로컬에 다운로드됬기 때문 (로컬, Docker hub 둘 다)
FROM node
# 모든 명령은 해당 폴더에서 실행해야한다
# 복사하기 전에 해당 폴더에서 다른 명령을 설정
# Docker컨테이너의 작업 디렉토리를 설정하고 이를 /app으로 설정
# 현재 디렉토리
WORKDIR /app
COPY package.json /app
# 설치
# app 폴더에서 npm 을 설치
RUN npm install
# COPY = Docker에게 로컬 컴퓨터에 있는 어떤 파일이 이미지로 가야하는지 알려준다.
# 내 코드를 앱 폴더에 복사
COPY . /app
# 컨테이너가 실행될 때 특정 포트를 로컬시스템에 노출시킨다.
EXPOSE 80
# 컨테이너가 생성될 때마다 해당 컨테이너 내부에 존재하는 node 명령을 사용하여 sever.js가 실행되도록 Docker에 전달
CMD ["node","server.js"]
실행 명령어
Dockerfile을 기반으로 사용자 지정 이미지를 빌드
docker build .컨테이너 시작
docker run -p 3000:80 f0978a54ea8ef314989ae4dc765dc817eb76118fab8fe77?? 3000:80 ->3000 = 로컬포트, 80 = Docker 컨테이너 노출 포트
더보기
# server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
let userGoal = 'Learn Docker!';
app.use(
bodyParser.urlencoded({
extended: false,
})
);
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send(`
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section>
<h2>My Course Goal</h2>
<h3>${userGoal}</h3>
</section>
<form action="/store-goal" method="POST">
<div class="form-control">
<label>Course Goal</label>
<input type="text" name="goal">
</div>
<button>Set Course Goal</button>
</form>
</body>
</html>
`);
});
app.post('/store-goal', (req, res) => {
const enteredGoal = req.body.goal;
console.log(enteredGoal);
userGoal = enteredGoal;
res.redirect('/');
});
app.listen(80);
더보기
# package.json
{
"name": "docker-complete",
"version": "1.0.0",
"description": "",
"main": "server.js",
"author": "Maximilian Schwarzmüller / Academind GmbH",
"license": "MIT",
"dependencies": {
"express": "^4.17.1",
"body-parser": "1.19.0"
}
}
더보기
# styles.css
html {
font-family: sans-serif;
}
body {
margin: 0;
}
section,
form {
padding: 1rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 2rem auto;
max-width: 40rem;
}
.form-control {
margin: 0.5rem 0;
}
input {
font: inherit;
}
input,
label {
display: block;
}
label {
font-weight: bold;
margin-bottom: 0.5rem;
}
button {
background-color: #2f005a;
border: 1px solid #2f005a;
color: white;
cursor: pointer;
padding: 0.5rem 1.5rem;
}
button:hover,
button:active {
background-color: #50005a;
border-color: #50005a;
}