728x90

이 포스팅 분류는 Docker를 정확히 어떻게 사용할지를 다루지 않는다.

대신 Docker로 특정 상황에 어떻게 환경을 구축해야하는지의 예제를 담고 있다.

만약 이 Docker에 대해서 어떻게 관리하는 지를 알고싶다면 인터넷을 검색을 활용하거나

필자의 블로그에서 Software-Docker를 확인해주기를 바란다.

현재 여기 업로드 되어있는 모든 예제들은 필자의 github repository에 올라와있다.

그 주소는 아래와 같다.


https://github.com/kukaro/Eris-DockerExampleTemplate

예제를 직접 확인하고 싶다면 해당 repository를 참조하라.


이번에는 우분투 환경에 플라스크로 웹을 구축하고 프론트엔드 패키지매니저를 사용해서 static파일들을 관리해 보도록 하자.

프로젝트는 아래와 같다.



Front End Package Manager(Bower)



프론트엔드 패키지 매니저는 여러종류가 있다. 필자는 bower를 쓰는데 npm이나 yarn, 혹은 turbo등을 쓰는 사람이 있을 수 있는데 뭐 알아서 선택하자.

만약 도커에서 Front End Package Manager를 안쓴다면 이 부분을 스킵해도된다.


{
  "name": "FLASKAPP",
  "homepage": "https://github.com/kukaro/KamangBlogData",
  "authors": [
    "kukaro <justkukaro@naver.com>"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "static",
    "test",
    "tests"
  ],
  "dependencies": {
    "vue": "^2.5.16",
    "vue-router": "^3.0.1"
  }
}

bower.json을 보면 vue와 vue-router를 쓰는걸 확인할 수 있다.

물론 이는 중요하지 않다.


{
  "directory" : "static"
}

bowerrc에는 설치 디렉터리를 변경하여 static에 넣은걸 알 수 있다.

flask는 정적 폴더의 디폴트 디렉터리가 static이기에(플라스크에서 편경할 수 있다.)bowerrc로 변경해준다.


Flask-Python




플라스크는 최종적으로 static,templates폴더와 소스폴더로 나눠진다.

지금 static이 없는 이유는 위에서도 설명했지만 bower를 통해서 static을 받을 것이기 때문이다.

그리고 보통 app.py로 서버를 만드는 경우가 많은데 필자는 __init__.py로 이름을 만들어서 패키지화 시켰다.

내부는 아래와 같다.


from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello_world():
    return render_template('index.html')


@app.route('/hi')
def hi():
    return 'hi'


if __name__ == '__main__':
    app.run(host='0.0.0.0')

테스트 하기위한 몇개의 페이지가 있다. 그리고 렌더링 하기 위한 index.html이 눈에 띈다.

또한 어플을 실행할 때 host를 0.0.0.0을 해줘야하는데 그래야 외부에서 사용할 수 있다.

도커는 가상환경과 외부를 연결해서 사용하는 방식이기에 이를 안해주면 작동하지 않는다.

포트는 가만히 두면 5000이다.


<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{{ url_for('static',filename='vue/dist/vue.js') }}"></script>
    <script src="{{ url_for('static',filename='vue-router/dist/vue-router.js') }}"></script>
</head>
<body>
<div id="app">
    {% raw %}
    {{hello}}
    {% endraw %}
    <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
</div>
</body>
<script>

    Vue.use(VueRouter);

    const Foo = {template: '<div>foo</div>'};
    const Bar = {template: '<div>bar</div>'};

    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ];

    const router = new VueRouter({
        mode: 'history', // 해시태그 삭제
        routes // routes: routes 의 약어
    });

    new Vue({
        el: '#app',
        router,
        data: {
            hello: 'Hello world!'
        }
    });

</script>
</html>

index.html은 flask와 vue를 사용해서 렌더링 한다.

index.html은 static 파일을 참조한다.


Flask

requirements.txt는 현재 파이썬 프로젝트를 돌리기 위하여 필요한 패키지가 선언되어 있다.

현재 필자는 Flask만 사용했지만 여러분은 필요에 따라서 더 필요할 수 있다.


DockerFile


이제 도커파일을 한번 보도록하자.

내부는 이와같이 되어있다.


# Install ubuntu
FROM ubuntu:16.04
MAINTAINER kukaro <justkukaro@naver.com>
RUN apt-get -y update && apt-get -y upgrade

#Set Argument
ENV DEST /var/www/html

# Install python
RUN apt-get -y install python3
RUN apt-get -y update && apt-get -y install python3-pip

# Make port 80 available to the world outside
EXPOSE 5000

# install npm, bower
RUN apt-get -y install git
RUN apt-get -y install nodejs
RUN apt-get -y install npm
RUN apt-get install -y build-essential
RUN cp /usr/bin/nodejs /usr/bin/node
RUN npm install -g bower

# Import python project
ADD FLASKAPP ${DEST}/FLASKAPP

# Install module
RUN /usr/bin/pip3 install --upgrade pip && pip3 install -r ${DEST}/FLASKAPP/requirements.txt
RUN cd ${DEST}/FLASKAPP/ && bower install --allow-root

# CMD
CMD python3 ${DEST}/FLASKAPP/__init__.py -D FOREGROUND

운영체제는 우분투를 선택한다.

우분투 가상환경을 만들 것이기에 FROM에 우분투와 버전을 선언해준다.

그 다음 apt를 upgrade하기 위해서 update와 같이 해준다.


그리고 python3를 설치해준다.

또한 pip를 설치해야하는데 그냥은 설치가 안되므로 update를 하고 그 라인에서 파이프로 같이 실행하도록하자.

그리고 포트를 5000으로 열어준다. 그 이유는 flask는 그냥 사용하면 5000으로 열리므로 5000을 열어주는것.

만약 다른 포트를 사용한다면 포트를 다른 번호로 열어주시면 된다.


필자의 경우 bower를 사용하므로 bower를 설치하기 위해서 위와 같은 작업들을 해준다.

먼저 npm을 설치하기 위해서 git이 필요하더라.(나중에 여러분들할땐 아닐 수도 있다.)

일반적인 상황과 달리 nodejs를 설치한다고 npm이 설치되진 않더라. 그래서따로 설치해줬다.

그리고 bower를 설치하기위해서 build-essential이 필요했다. 그래서 위와같이 설치해줬다.

그리고 문제점이 node라는 명령어가 없다. 그래서 npm이 동작하지 않는다....

따라서 우리는 nodejs를 복사해서 node라는 명령어를 추가했다. 어짜피 원래 둘은 같은명령어다.

복사하는게 걸린다면 심볼릭 링크를 만들어도 되지만 원래 심볼릭 링크이기에 복사하는것과 별 차이는 없다.


그리고 ADD를 사용하여 우리의 프로젝트를 가상환경에 올려준다.

위치는 필자의 경우 아파치 위치로 했는데 사실 우리는 아파치를 쓰지 않으므로 어디에 올리던 큰 상관은 없다.

여러분이 원하는 디렉터리에 올려주시면된다.

 

올리고 나면 해야할 작업은 총 2가지이다.

하나는 먼저 requirements.txt에 작성된 모듈을 설치하는 것, 그리고 bower에 설치되어있는 모듈을 설치하는것.

즉 pip와 bower를 사용하는 것이다.

물론 여러분이 둘다 안쓰면 둘다 할 필요가 없을 것이다.


마지막으로 CMD로 python3을 실행시켜주면된다.


그럼 되는지 확인해 보자.


docker build -t <어플이름> <디렉터리>(보통 현재디렉터리(.)을 사용)



도커를 빌드 시켜서 마지막 까지 다 진행되는지 확인해 준다.


docker run -d -p <외부포트>:<내부포트> <어플이름>



외부 포트 5000과 내부포트 5000을 연결시킨다.

외부포트를 80이나 다른 포트로 연결해도 당연히 되지만 내부는 우리가 5000을 열었으므로 반드시 5000만 사용해준다.


실행해서 확인해 보면 static이 제대로 설치되서(bower) 서버(flask)가 제대로 돌아가고 있음을 확인할 수 있다.



저작자표시

'DevOps > Docker-Example' 카테고리의 다른 글

[Docker][ShellScript]Tomcat-Maven-Spring-Java-Ubuntu : Spring 프로젝트 개발 후 바로 배포하기  (0) 2019.07.20
[Docker]Ubuntu-Sshd : 우분투 컨테이너 실행하고 원격접속하기(ssh)  (0) 2019.06.28
[Docker]Mysql.InitSql : Mysql동작시 sql읽고 db초기화하기  (0) 2019.04.21
[Docker]Apache-CodeIgniter-FrontEndPackageManager(Bower)-Php-Ubuntu  (0) 2018.05.26
[Docker]Apache(mod_wsgi)-FrontEndPackageManager(Bower)-Flask-Python-Ubuntu  (0) 2018.05.25

+ Recent posts

티스토리툴바