이미지 분석 서버리스 웹 앱 간단한 ver.

7213 단어 chaliceserverlessReKognition도커AWS

소개



먼저 보는 기계 학습 ~AWS SAGEMAKER/REKOGNITION과 VUE로 만드는 화상 판정 WEB 어플리케이션을 참고로 서버리스 이미지 분석 웹 앱을 구축할 수 있는 소스 세트를 GitHub에 공개했다.

참고로 한 페이지와의 차이점은 아래와 같습니다.
  • 참고로 한 페이지에서는 SageMaker에서 추론 모델의 작성으로부터 엔드 포인트를 공개, 그리고 그 결과를 이용하고 있지만, 그 부분을 컷 해 간이 ver.로 했다.
  • 추론의 엔드 포인트는 기본적으로 세워지지 않기 때문에, 그 사이 요금이 발생해 버리기 (위해)때문에.
  • API Gateway/rekognition/lambda이면 기본적으로 사용한 요금이됩니다.

  • 참고 페이지에서는 cloud9를 통해 lambda에 배포하지만 Docker에서 chalice 환경을 구축하고 거기에서 배포합니다.
  • Docker 이미지를 빌드하는 것만으로 chalice 환경의 구축으로부터 배포까지 단번에 실시하도록(듯이) 변경했다.


    • 구성도





    필요한 것


  • AWS 계정 (AWS CLI 설정 완료됨)
  • Docker

  • GitHub에 게시 된 소스 세트

    • 구축 절차



    1. GitHub에서 소스 코드 세트를 복제


    .
├── Dockerfile
├── LICENSE
├── README.md
├── front
│   ├── index.html
│   └── main.js
├── image-classification
│   ├── app.py
│   └── requirements.txt
├── images
│   ├── test1.png
│   └── test2.png
└── requirements.txt

    2. Dockerfile 재작성



    AWS CLI에 필요한 액세스 키와 비공개 키 항목 재작성
    ENV AWS_ACCESS_KEY_ID=<<YOUR AWS_ACCESS_KEY_ID>>
ENV AWS_SECRET_ACCESS_KEY=<<YOUR AWS_SECRET_ACCESS_KEY>>

    3. Docker 심상 빌드 & chalice 배치



    소스 코드 세트에 포함된 Dockerfile에서 docker 이미지를 빌드하면, chalice 환경의 구축으로부터 Lambda에의 배포까지 단번에 실시한다. 엔드포인트가 화면에 표시되므로 메모해 둡니다. (Rest API URL의 위치)

    명령docker build -t <任意のイメージ名> .
    Creating deployment package.
Updating policy for IAM role: image-classification-dev
Creating lambda function: image-classification-dev
Creating Rest API
Resources deployed:
  - Lambda ARN: arn:aws:lambda:ap-northeast-1:XXXXXXXXXXXX:function:image-classification-dev
  - Rest API URL: https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/api/

    4. IAM 역할의 정책 변경



    chalice가 배포될 때 생성되는 정책image-classification-dev을 편집합니다.
    아래의 두 가지 서비스를 추가합니다. 자세한 내용은 2-2-1. 백엔드(람다) 권한 설정 항목을 참조하십시오.
  • Rekognition
  • Translate

    • 5. 게시용 S3 버킷 생성



    AWS 콘솔 관리 또는 CLI 등으로 S3 버킷을 생성합니다.
    자세한 내용은 2-1-2. S3 항목을 참조하십시오.

    그런 다음 front/main.js <<YOUR ENDPOINT URL>>를 chalice 배포 중에 기록한 엔드 포인트로 다시 작성하여 작성한 버킷에 업로드하십시오.
    .post(
  "https://<<YOUR ENDPOINT URL>>/api/rekognition",
  this.image,
  config
)

    aws s3 cp index.html s3://<<YOUR BUCKET NAME>>/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
aws s3 cp main.js s3://<<YOUR BUCKET NAME>>/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

    【선택 사항】 IP에 의한 액세스 제한을 부여하는 경우


  • 작성한 S3 버킷 액세스 제한 → 버킷 정책 항목 편집 

  • {
    "Version": "2012-10-17",
    "Id": "SourceIP",
    "Statement": [
        {
            "Sid": "SourceIP",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::<YOUR BUCKET NAME>/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "xxx.xxx.xxx.xxx/xx",
                        "yyy.yyy.yyy.yyy/yy",
                    ]
                }
            }
        }
    ]
}

    6. 동작 확인



    만든 S3 버킷의 속성에서 Static website hosting에 포함된 엔드포인트 URL에 액세스합니다.
    자세한 내용은 2-3. 동작 확인 항목을 참조하십시오.xxx.xxx.xxx.xxx/xx를 선택하고 이미지를 업로드하면 왼쪽에 이미지가 표시됩니다. yyy.yyy.yyy.yyy/yy 버튼을 누르면 오른쪽에 판정 결과가 표시되면 성공.

    기타 (추가 구현하고 싶은 곳)


  • Rekognition의 다른 서비스 (예 : 얼굴 분석, 얼굴 인식)
  • Vue.js를 React.js로 변경하거나 판정 결과가 표시 될 때까지 대기중인 아이콘으로 변경
    • Laravel의 서버리스 라이브러리 bref를 사용하여 lambda에서 hello world
    자동 완성 후보가 좁혀지지 않음 (autocomplete jQuery UI ajax)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage