포스트

NginX 로 HTML 연습 환경 만들기

Docker 와 NginX 를 이용하여 간단하게 웹서버를 만듭니다. TailwindCSS 도 CLI 의 watch 기능을 이용해 CSS 연습도 할 수 있습니다.

게시
Preview Image
By 태주아빠
읽는 시간 3분
NginX 로 HTML 연습 환경 만들기

오랜만에 다뤄 보려고 하니깐 기억도 안나고 해서, 초심자의 마음으로 정리합니다.

1. HTML 연습용 nginx 설정

작업 순서

  • NginX 을 위한 Docker 설정
  • HTML 작성
1
2
3
4
5
6
7
8

<root>
├── docker-compose.yml
├── html
│   └── index.html
└── nginx
    ├── nginx.conf
    └── conf.d/
        └── default.conf

작업 내용

작업할 프로젝트 경로를 생성하고

1
2
3
4
5
6
7
8
9
10

# 프로젝트 root
mkdir nginx-simple
cd nginx-simple

# 하위 디렉토리 생성
mkdir -p nginx/conf.d
mkdir html

# docker 설정 파일
touch docker-compose.yml

docker 를 위한 yml 파일을 작성한다

1
2
3
4
5
6
7
8
9
10
11
12

version: '3.8'

services:
  nginx:
    image: nginx:alpine
    container_name: my-nginx-container
    ports:
      - "8080:80" # host port : container port
    volumes:
      - ./nginx/conf.d/:/etc/nginx/conf.d/:ro
      - ./html:/usr/share/nginx/html:ro
    restart: always

NginX 의 default 사이트를 위한 config 파일 작성

1
2
3
4
5
6
7
8
9
10

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

간단한 HTML 파일을 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph of text.</p>
    <p>This is another paragraph.</p>
</body>
</html>

Docker Compose 로 Nginx 를 실행한다.

1
2
3
4
5

# 실행
docker compose up -d

# 종료
docker compose down

http://localhost:8080 에서 HTML 페이지를 확인한다.

2. TailwindCSS 연습 환경 만들기

참고문서 : Get started with Tailwind CSS

작업 순서

  • tailwindcss 설치 (bun 또는 npm)
  • index.html, input.css 작성
  • package.json 에 scripts 항목 추가
  • build:css 및 watch:css 실행

작업 내용

1
2
3
4
5
6
7

# 프로젝트 root 에서 tailwindcss v4 설치
bun install -d tailwindcss @tailwindcss/cli

# html/input.css 작성
cat << EOF > html/input.css
@import "tailwindcss";
EOF

html/index.html 도 tailwindcss 를 사용해 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
    <button class="bg-sky-500 hover:bg-sky-700">Save changes</button>
  </body>
</html>

scripts 명령어를 작성한다.

1
2
3
4
5
6
7
8
9
10
11

{
  "scripts": {
    "build:css": "bunx @tailwindcss/cli -i ./html/input.css -o ./html/output.css",
    "watch:css": "bunx @tailwindcss/cli -i ./html/input.css -o ./html/output.css --watch"
  },
  "dependencies": {},
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.18",
    "tailwindcss": "^4.1.18"
  }
}

watch:css 명령어를 실행하자.

1
2
3
4
5

# output.css 생성
bun run build:css

# output.css 지속 갱신
bun run watch:css

index.html 에 아래 항목을 추가하고 새로고침 해보자.

1

<h3 class="text-xl italic">Hello world! 3rd</h3>

이제 간단한 tailwindcss 연습 환경이 만들어졌다.

9. Reviews

  • 오랜만에 다루어 보려니깐 바로 손이 안나간다.
  • 더 쉽게, 완전 초보도 바로 따라할 수 있도록 문서를 작성하자.

 
 

끝!   읽어주셔서 감사합니다.

DevOps
docker nginx
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.