App Engine을 위한 기본 웹 서비스 작성

Flask를 사용하여 정적 HTML 파일을 제공하는 웹 서비스를 작성하고 로컬에서 테스트합니다. 그런 다음 App Engine에 웹 서비스를 배포하는 데 필요한 구성 파일을 만듭니다.

이 단계에서는 자리표시자 데이터를 표시하는 웹 서비스의 버전을 만들고 로컬에서 테스트합니다. 여기서 목표는 Cloud Datastore 및 Firebase 인증을 추가하기 전에 기본 웹 서비스가 작동하는지 확인하는 것입니다.

시작하기 전에

  1. Google Cloud 프로젝트를 아직 만들지 않은 경우 Google Cloud 프로젝트를 만듭니다.

  2. 아직 설정하지 않은 경우 다음을 수행하여 Python 3 개발을 위한 로컬 환경을 설정합니다.

    • 웹 서비스를 개발하고 Google Cloud CLI를 실행하기 위해 Python 3을 다운로드하고 설치합니다.

    • Google Cloud 사용자 인증 정보를 사용하여 Google Cloud CLI로 인증하고 Datastore로 로컬 테스트를 사용 설정합니다.

      gcloud auth application-default login
      

웹 서비스 파일 구조화

웹 서비스를 만드는 프로젝트 디렉터리의 파일 구조는 다음과 같습니다.

  • building-an-app/
    • app.yaml
    • main.py
    • requirements.txt
    • static/
      • script.js
      • style.css
    • templates/
      • index.html

다음 섹션에서는 프로젝트 디렉터리에 파일을 설정하는 방법에 대한 예시를 제공합니다.

웹 서비스 작성하기

웹 서비스의 초기 반복은 Flask를 사용하여 Jinja 기반 HTML 템플릿을 제공합니다.

웹 서비스를 설정하려면 다음을 수행하세요.

  1. templates/index.html 파일 생성:

    <!doctype html>
    <!--
     Copyright 2021 Google LLC
    
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
    
          http://www.apache.org/licenses/LICENSE-2.0
    
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
    -->
    
    <html>
    <head>
      <title>Datastore and Firebase Auth Example</title>
      <script src="{{ url_for('static', filename='script.js') }}"></script>
      <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    </head>
    <body>
    
      <h1>Datastore and Firebase Auth Example</h1>
    
      <h2>Last 10 visits</h2>
      {% for time in times %}
        <p>{{ time }}</p>
      {% endfor %}
    
    </body>
    </html>
    
  2. static/script.jsstatic/style.css 파일을 사용하여 동작 및 스타일을 추가합니다.

    'use strict';
    
    window.addEventListener('load', function () {
    
      console.log("Hello World!");
    
    });
    /**
     * Copyright 2021 Google LLC
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     *      http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */
    
    body {
      font-family: "helvetica", sans-serif;
      text-align: center;
    }
    
  3. main.py 파일에서 Flask를 사용하여 자리표시자 데이터로 HTML 템플릿을 렌더링합니다.

    import datetime
    
    from flask import Flask, render_template
    
    app = Flask(__name__)
    
    @app.route("/")
    def root():
        # For the sake of example, use static information to inflate the template.
        # This will be replaced with real information in later steps.
        dummy_times = [
            datetime.datetime(2018, 1, 1, 10, 0, 0),
            datetime.datetime(2018, 1, 2, 10, 30, 0),
            datetime.datetime(2018, 1, 3, 11, 0, 0),
        ]
    
        return render_template("index.html", times=dummy_times)
    
    if __name__ == "__main__":
        # This is used when running locally only. When deploying to Google App
        # Engine, a webserver process such as Gunicorn will serve the app. This
        # can be configured by adding an `entrypoint` to app.yaml.
        # Flask's development server will automatically serve static files in
        # the "static" directory. See:
        # http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
        # App Engine itself will serve those files as configured in app.yaml.
        app.run(host="127.0.0.1", port=8080, debug=True)
  4. requirements.txt 파일에서 웹 서비스에 필요한 모든 종속 항목을 구성합니다.

    Flask==3.0.0
    

웹 서비스 테스트

가상 환경에서 로컬로 실행하여 웹 서비스를 테스트합니다.

Mac OS/Linux

  1. 격리된 Python 환경을 만듭니다.
    python3 -m venv env
    source env/bin/activate
  2. 현재 위치가 샘플 코드가 있는 디렉터리가 아니면 hello_world 샘플 코드가 포함된 디렉터리로 이동합니다. 그런 후 종속 항목을 설치합니다.
    cd YOUR_SAMPLE_CODE_DIR
    pip install -r requirements.txt
  3. 애플리케이션을 실행합니다.
    python main.py
  4. 웹브라우저에 다음 주소를 입력합니다.
    http://localhost:8080

Windows

PowerShell을 사용하여 Python 패키지를 실행합니다.

  1. PowerShell 설치 위치를 찾습니다.
  2. PowerShell 바로가기를 마우스 오른쪽 버튼으로 클릭하고 관리자 권한으로 시작합니다.
  3. 격리된 Python 환경을 만듭니다.
    python -m venv env
    .\env\Scripts\activate
  4. 프로젝트 디렉터리로 이동하여 종속 항목을 설치합니다. 현재 위치가 샘플 코드가 있는 디렉터리가 아니면 hello_world 샘플 코드가 포함된 디렉터리로 이동합니다. 그런 후 종속 항목을 설치합니다.
    cd YOUR_SAMPLE_CODE_DIR
    pip install -r requirements.txt
  5. 애플리케이션을 실행합니다.
    python main.py
  6. 웹브라우저에 다음 주소를 입력합니다.
    http://localhost:8080

App Engine을 위한 웹 서비스 구성

App Engine에 웹 서비스를 배포하려면 app.yaml 파일이 필요합니다. 이 구성 파일은 App Engine을 위한 웹 서비스 설정을 정의합니다.

App Engine에 배포할 웹 서비스를 구성하려면 app.yaml 파일을 프로젝트의 루트 디렉터리에 생성합니다(예: building-an-app).

# Copyright 2021 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#      http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

runtime: python39

handlers:
  # This configures Google App Engine to serve the files in the app's static
  # directory.
- url: /static
  static_dir: static

  # This handler routes all requests not caught above to your main app. It is
  # required when static routes are defined, but can be omitted (along with
  # the entire handlers section) when there are no static files defined.
- url: /.*
  script: auto

이 간단한 웹 서비스의 경우 app.yaml 파일은 정적 파일에 대한 런타임 설정 및 핸들러만 정의해야 합니다.

보다 복잡한 웹 서비스의 경우 확장, 추가 핸들러, 기타 애플리케이션 요소(환경 변수, 서비스 이름)와 같은 app.yaml의 추가 설정을 구성할 수 있습니다. 지원되는 모든 요소에 대한 자세한 내용과 목록은 app.yaml 참조 문서를 확인하세요.

다음 단계

웹 서비스를 구성하여 만들고 테스트를 마쳤으므로 이 버전의 웹 서비스를 App Engine에 배포할 수 있습니다.