1. 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

'Docker 설치 및 기본 실습'과 'Flutter 환경 설정'으로 진행된다

 

Docker 설치 및 기본 실습

 

1. Docker 설치(for window)

> Docker 공식 웹사이트에서 Docker Desktop for Windows 설치파일을 다운로드하기 

https://docs.docker.com/desktop/install/windows-install/

Install Docker Desktop on Windows

 

> Docker Desktop Installer.exe 실행 및 설치 진행

> 설치가 완료되면 cmd / PowerShell을 열고 Docker가 설치되었는지 확인

docker --version

 

 

2. Docker를 통한 간단한 Ubuntu 컨테이너 실행 (실습)

docker run -it ubuntu bash

> Docker Hub에서 Ubuntu 이미지를 다운로드하고 bash 셸을 사용하는 Ubuntu 컨테이너를 실행한다

> 컨테이너 내부에 접속되면 bash 명령어를 통해 Linux 명령어 실행 가능

 

 

3. Docker Hub를 통한 이미지 다운로드 및 사용

: Nginx 웹 서버 컨테이너를 실행해 보자 

docker run -d -p 8080:80 nginx

> Ngnix 웹 서버를 백그라운드에서 실행하고 호스트의 8080 포트를 컨테이너의 80 포트에 매핑한다

이후 http://localhost:8080에 접속하면 Nginx 기본 페이지를 볼 수 있다 

 

4. 혹시 Port 충돌이 발생한다면? : 해결방법

docker: Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:8080 -> 0.0.0.0:0: listen tcp 0.0.0.0:8080: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.

 

4-1) 우선 어떤 프로세스가 8080 포트를 사용 중인지 확인해본다

netstat -ano | findstr 8080

> PID 3984인 프로세스가 현재 8080 포트를 점유 중이다

 

4-2) 다시 tasklist와 PID를 사용해 검색해 보면 프로세스 이름이 나온다 

tasklist | findstr 3984

> TNSLSNR.EXE가 이미 점유 중인 상황이라 발생한 문제였다

> TNSLSNR.EXE : TNS Listener라는 오라클 DB 설치 시 같이 설치되는 서비스. 외부에서 접속을 하면 TNS Listener는 SID 값을 가지고 어느 오라클 DB로 접속을 시킬지 중개한다고 한다. 오라클 DB를 띄워놨어도 TNS Listener가 종료되어 있으면 외부에서 접속을 못한다. 

 

4-3) 두 가지 해결방법 중 택 1

- 현재 실행 중인 프로세스를 종료 후 도커 컨테이너를 실행하는 방

- 컨테이너에 다른 포트를 할당하여 생성하는 방법 

 

=> 어떤 방법이 나을지 검색해 봤는데 종료하는 방법을 더 많이 사용하는 것 같아서 종료하기로 결정 

 

> 작업관리자 실행 > 자세히/세부정보 > TNSLSNR.EXE 작업 끝내기 

> taskkill /pid *3984 /f

 

 

Flutter 환경 설정

1. Visual Studio Code 설치 및 Flutter 플러그인 설정

1-1) https://code.visualstudio.com/  공식 웹사이트에서 설치파일을 받아 다운로드하여 설치

Visual Studio Code - Code Editing. Redefined

 

1-2) Flutter 플러그인 설치

 

Extensions(ctrl+shift+X)에서 Flutter를 찾아 install 한다 

 

 

2. Dockerfile을 생성

Dockerfile :
- 도커 이미지를 만들기 위한 설정파일
- 컨테이너가 어떻게 동작할지 사전에 정의해 줄 수 있음
- 도커 이미지는 크게 두 가지 구역으로 나눠진다 => 시작 명령어 / 파일 스냅샷
- Dockerfile에는 컨테이너 시작 시 실행될 명령어가 명시되어야 한다 => 시작 명령어에 해당 
- 베이스 이미지를 명시해 준다 => 파일 스냅샷에 해당
- 추가적으로 필요한 파일을 다운로드하기 위한 몇 가지 명령어를 명시한다 => 파일 스냅샷에 해당 
=> 따라서 도커  파일 생성을 위해선 도커 이미지가 필요로 하는 것이 무엇인지 알아야 한다 

 

2-1) Dockerfile을 만들 폴더를 생성 

 

2-2) 위에서 생성한 파일 폴더를 vscode로 실행한다

 

2-3) vscode에서 New File을 생성하고 이름을 Dockerfile로 해 준다(확장자 따로 없이) 

-> 제대로 생성될 경우 해당 파일 아이콘이 Docker 모양으로 바뀜 

 

2-4)  Dockerfile 예제로 내용 작성 완료 (https://atomicdev.tistory.com/15)

# Flutter Dockerfile

# Base image: Use the official Flutter Docker image
FROM cirrusci/flutter:stable

# Install additional dependencies
RUN apt-get update && apt-get install -y \
    git \
    curl \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa \
    openjdk-11-jdk

# Set up Android SDK
RUN yes | sdkmanager --licenses
ENV ANDROID_HOME=/usr/local/android-sdk
ENV PATH="$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH"

# Create and set the working directory
WORKDIR /app

# Copy your Flutter project files into the container
COPY . /app

# Run Flutter doctor to check environment setup
RUN flutter doctor

 

 

3. 도커 이미지 만들기 

Dockerfile -> Docker client -> Docker Server를 거쳐 이미지를 생성하게 해준다 

 

3-1) Dockerfile이 있는 곳으로 이동

cd "desktop\mkdir dockerfile-folder"

 

3-2) 이미지 생성

docker build -t flutter-dev .

> 이미지 아이디 값을 매번 사용하는 것은 번거로운 일이므로 이미지를 생성할 때 네이밍을 부여할 수 있다! 

docker build -t {별칭/네이밍} 

 

 

3-3) 이미지 실행 

docker run -it flutter-dev

docker run -it {별칭/네이밍}

 

 

---

공부 후 실습 완료

https://atomicdev.tistory.com/15

2_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발