분류 전체보기

[Vue router] NavigationDuplicated 2020.12.10 1
django.db.migrations.exceptions.InconsistentMigrationHistory 2020.12.10
[Vue router] Navigation Gaurd 2020.12.10
[동영상 스트리밍] 2. AWS CloudFront, S3을 이용한 동영상 스트리밍 2020.12.08
[동영상 스트리밍] 1. AWS MediaConvert와 Lambda, S3 연동하는 법 2020.12.07 1
mysql 테이블 전체 삭제 2020.11.30

[Vue router] NavigationDuplicated

2020. 12. 10. 23:21

NavigationDuplicated 에러는

Vue router를 사용할 때 생길 수 있는 에러이다.

해결법은

router.go(router.currentRoute);

를 통해 해결할 수 있다.

저작자표시

'Web > Vue' 카테고리의 다른 글

[Vue router] Navigation Gaurd (0)	2020.12.10
Vue.js 강의노트 07.[PWA, Deployment with Vue CLI] (0)	2020.03.19
Vue.js 강의노트 06.[Router, PWA] (0)	2020.03.09
Vue.js 강의노트 05.[Render, Webpack, Vuex] (0)	2020.02.25
Vue.js 강의노트 04. [Event bus, 라이프사이클, ES6] (0)	2020.02.15

django.db.migrations.exceptions.InconsistentMigrationHistory

2020. 12. 10. 23:19

django.db.migrations.exceptions.InconsistentMigrationHistory: Migration account.0001_initial is applied before its dependency users.0001_initial on database 'default'.

OperationalError: no such table: user_user

커스텀 유저를 처음 설정할 때 발생할 수 있는 에러로서

해결법은

python manage.py migrate --run-syncdb

명령어를 통해 마이그레이션을 하지 않고 테이블만 생성하여 해결할 수 있다.

저작자표시

'Web > Django' 카테고리의 다른 글

Django: 'Data' object has no attribute 'save' (0)	2020.11.14
ValueError: Field 'id' expected a number but got '' (0)	2020.11.14
ModuleNotFoundError: No module named 'django.db.migrations.migration' (0)	2020.10.19
파이콘 한국 2020 / Django ORM 최적화 세션 요약 (1)	2020.09.26
Docker를 이용하여 Django와 Nginx 쉽게 연동하기 (0)	2020.06.07

[Vue router] Navigation Gaurd

2020. 12. 10. 23:15

Navigation gaurd

routes: [
    {
        path: "/home",
        component: Home
        beforeEnter: (to, from, next) => {
            if (localStorage.getItem("key") == null) {
                return next({
                    path: "/login",
                    query: { redirect: to.fullPath }
                });
            }
            next();
        };
    }
]

위 예시와 같이 네비게이션 가드를 통해 특정 라우팅에 대해 가드를 설정할 수 있다.
쉽게 말해, 특정 컴포넌트로 이동하기 전에 조건 처리를 통해 로그인이 되었는지 등 검증 로직을 수행할 수 있는 방법이다.

저작자표시

'Web > Vue' 카테고리의 다른 글

[Vue router] NavigationDuplicated (1)	2020.12.10
Vue.js 강의노트 07.[PWA, Deployment with Vue CLI] (0)	2020.03.19
Vue.js 강의노트 06.[Router, PWA] (0)	2020.03.09
Vue.js 강의노트 05.[Render, Webpack, Vuex] (0)	2020.02.25
Vue.js 강의노트 04. [Event bus, 라이프사이클, ES6] (0)	2020.02.15

[동영상 스트리밍] 2. AWS CloudFront, S3을 이용한 동영상 스트리밍

2020. 12. 8. 22:03

AWS Cloudfront

CloudFront는 전 세계적으로 정적, 동적인 웹 컨텐츠, 비디오 스트리밍 및 API를 안전하고 규모에 맞게 제공하는 CDN (Content Dilivery Network) 서비스이다.
에지 로케이션이라고 하는 전세계 데이터 센터 네트워크를 통해 콘텐츠 제공
에지 서버로 콘텐츠를 캐시하고 제공하면 시청자와 가장 가까운 위치에서 콘텐츠 제공
- 에지 로케이션에서 컨텐츠를 캐싱함으로써 s3 버킷의 부하를 줄이고, 컨테츠 전달 시 사용자에게 빠른 응답
CloudFront 기능 : Origin Access Identity (OAI)
- 해당 컨텐츠에 대한 액세스를 CloudFront 및 해당 작업으로 제한함.
악의적 공격 보호 및 안정장치
- AWS WAF / AWS Shield 통합

동영상 스트리밍

MediaConvert를 통해 S3 버킷 내에 hls 포맷으로 전환했다면 다음은
CloudFront를 통해 영상을 배포해야 한다.

CloudFront 서비스 접속
[Create Distribution] 클릭
Web 형식과 RTMP 형식 중에서 고르라고 선택지를 주는데, RTMP 형식 사용하는 것이 아니면 Web 선택. (AWS CloudFront는 2021년부터 RTMP를 지원하지 않는다)
세부 세팅
- Origin Domain Name : 원하는 S3 버킷 선택 -> Origin ID는 자동으로 입력된다.
- Viewer Protocol Policy : HTTP and HTTPS
- Allowed HTTP Method : GET, HEAD
- Smooth Streaming : MS smooth streaming 사용한다면 Yes
- Restrict Viewer Access : 접근 제한을 걸 때 사용하므로 No
- Price Class : 전 세계의 edge를 사용할 지, 특정 리전의 edge를 사용할지.
- Object Caching 항목의 Default TTl : Origin으로 요청이 전달되기 전에 CloudFront 캐시에 머무르는 시간 (기본값 86400 == 24시간 == 1일)
  - Invalidations 탭에서 Create Invalidation 버튼을 눌러 *로 Invalidate 요청을 생성하게 된다면, 캐시가 만료되기 이전에 새 콘텐츠를 받아올 수 있다.
    - 무효화(Invalidate) : Cloudfront의 엣지 로케이션에 저장된 파일의 캐시를 삭제하는 기능으로, 캐시가 삭제되면 엣지 로케이션이 origin으로부터 새 파일을 받아옴.
http://d3kq9c1qyaz6nw.cloudfront.net/test.m3u8 혹은 내부에 폴더가 존재한다면
http://d3kq9c1qyaz6nw.cloudfront.net/Test/Default/HLS/test.m3u8 과 같은 형식으로 CDN에 접근할 수 있다.
video.js를 이용하여 hls에 접근할 수 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            href="https://unpkg.com/video.js/dist/video-js.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <video
            id="my_video_2"
            class="video-js vjs-default-skin"
            controls
            preload="auto"
            width="640"
            height="360"
            data-setup="{}"
        >
            <source
                src="http://d2d8kokzpr29em.cloudfront.net/test/Default/HLS/test.m3u8"
                type="application/x-mpegURL"
            />
        </video>

        <script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-media-sources/4.7.2/videojs-contrib-media-sources.min.js"
            integrity="sha512-utkFvaMvnpseOQ/4m1+/2zKYNh5r/FHUs5XZAds52wXbfMgeHvHg/3PFnou6DME2U7F2OkcPSM0AWQdYdPKAKg=="
            crossorigin="anonymous"
        ></script>
    </body>
    -->
</html>

저작자표시

'AWS' 카테고리의 다른 글

고가용성, 내결함성, 탄력성 (0)	2021.01.14
HLS 프로토콜이란 (Feat. MediaConvert) (0)	2020.12.15
API Gateway는 왜 사용할까 (0)	2020.12.15
[동영상 스트리밍] 1. AWS MediaConvert와 Lambda, S3 연동하는 법 (1)	2020.12.07
AWS Lambda를 알아보자 (0)	2020.11.06

[동영상 스트리밍] 1. AWS MediaConvert와 Lambda, S3 연동하는 법

2020. 12. 7. 23:03

How to use MediaConvert & Lambda & S3

인풋 s3 버킷 생성
아웃풋 파일을 담을 s3 버킷 생성
s3의 [속성] 탭에 들어가서 정적 웹 사이트 호스팅 활성화 (박스에 index.html 추가)
[권한] 탭에서 모든 퍼블릭 액세스 차단 해제

CORS 구성에 들어가서 다음 내용 추가

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["PUT", "POST", "DELETE"],
        "AllowedOrigins": ["http://www.example1.com"],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["PUT", "POST", "DELETE"],
        "AllowedOrigins": ["http://www.example2.com"],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
    }
]

MediaConvert를 경유하기 위한 IAM Role 설정
- IAM 서비스 접속
- [역할 생성] 클릭
- MediaConvert 클릭하고 [다음:검토] 나올 때까지 넘어가기
- 이름에 MediaConvertRole 입력
- [역할 생성] 클릭
- [요약] 들어가서 ARN 값 저장해놓기 (다음 단계에 사용)
Lambda를 위한 IAM Role 설정

VODLambdaRole이란 이름으로 IAM 역할 생성 / 역할 타입은 AWS Lambda
AWSLambdaBasicExecutionRole 정책을 attach (for CloudWatch logs permission) - [권한] 탭에서 [인라인 정책 추가] - [Json] 탭 클릭

추가한 정책 내 [인라인 정책 추가]에 들어가서 [JSON] 누른 다음 내용 추가

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "*",
            "Effect": "Allow",
            "Sid": "Logging"
        },
        {
            "Action": ["iam:PassRole"],
            "Resource": ["ARNforMediaConvertRole"],
            "Effect": "Allow",
            "Sid": "PassRole"
        },
        {
            "Action": ["mediaconvert:*"],
            "Resource": ["*"],
            "Effect": "Allow",
            "Sid": "MediaConvertService"
        },
        {
            "Action": ["s3:*"],
            "Resource": ["*"],
            "Effect": "Allow",
            "Sid": "S3Service"
        }
    ]
}

ARNforMediaConvertRole라고 적힌 Resource 부분을 지우고 아까 저장했던 ARN 값으로 대체
이름에 VODLambdaPolicy 입력하고 정책 생성

비디오 변환을 위한 Lambda 함수 작성
- [Lambda 함수 생성] 클릭
- Name에 VODLambdaConvert 입력
- Python 3.8 입력
- Role을 [기존 역할 선택] 누른 후 VODLambdaRole 선택
- job.json 과 convert.py를 다운 받아 zip으로 압축
- 함수에서 Configuration 탭에 들어가 [zip 파일 업로드] 선택
- 압축 파일을 업로드하고, handler를 convert.handler 로 수정
- 환경 변수를 다음과 같이 입력
  - DestinationBucket = <outputput bucket name>
  - MediaConvertRole = arn:aws:iam::ACCOUNT NUMBER:role/MediaConvertRole
  - Application = VOD

Lambda 함수 테스트 - test 이벤트에 다음 json 파일 추가

{
    "Records": [
        {
            "eventVersion": "2.0",
            "eventTime": "2017-08-08T00:19:56.995Z",
            "requestParameters": { "sourceIPAddress": "54.240.197.233" },
            "s3": {
                "configurationId": "90bf2f16-1bdf-4de8-bc24-b4bb5cffd5b2",
                "object": {
                    "eTag": "2fb17542d1a80a7cf3f7643da90cc6f4-18",
                    "key": "vodconsole/TRAILER.mp4",
                    "sequencer": "005989030743D59111",
                    "size": 143005084
                },
                "bucket": {
                    "ownerIdentity": { "principalId": "" },
                    "name": "rodeolabz-us-west-2",
                    "arn": "arn:aws:s3:::rodeolabz-us-west-2"
                },
                "s3SchemaVersion": "1.0"
            },
            "responseElements": {
                "x-amz-id-2": "K5eJLBzGn/9NDdPu6u3c9NcwGKNklZyY5ArO9QmGa/t6VH2HfUHHhPuwz2zH1Lz4",
                "x-amz-request-id": "E68D073BC46031E2"
            },
            "awsRegion": "us-west-2",
            "eventName": "ObjectCreated:CompleteMultipartUpload",
            "userIdentity": { "principalId": "" },
            "eventSource": "aws:s3"
        }
    ]
}

save이후 test를 눌렀을 때 200값이 반환되면 성공적으로 세팅됨

Lambda 함수에 input S3 bucket을 트리거로 설정
- trigger를 눌러 input S3 bucket을 연동하면 되며
- 이벤트 같은 경우는 모든 객체 생성 으로 설정
- prefix에 inputs/ 등을 입력하여 입력 폴더를 지정할 수도 있다.
- 해당 s3 버킷에 영상을 업로드했을 때 output 버킷에 변환된 영상 디렉토리가 생성되면 성공적으로 MediaConvert가 작동 된 것임. CloudWatch와 MediaConvert의 Job list에서도 성공적으로 실행된 것을 확인 할 수 있다.

Reference

저작자표시

'AWS' 카테고리의 다른 글

고가용성, 내결함성, 탄력성 (0)	2021.01.14
HLS 프로토콜이란 (Feat. MediaConvert) (0)	2020.12.15
API Gateway는 왜 사용할까 (0)	2020.12.15
[동영상 스트리밍] 2. AWS CloudFront, S3을 이용한 동영상 스트리밍 (0)	2020.12.08
AWS Lambda를 알아보자 (0)	2020.11.06

mysql 테이블 전체 삭제

2020. 11. 30. 05:22

SET @tables = NULL;
SELECT GROUP_CONCAT(table_schema, '.', table_name) INTO @tables
  FROM information_schema.tables
  WHERE table_schema = 'capstone'; -- specify DB name here.

SET @tables = CONCAT('DROP TABLE ', @tables);
PREPARE stmt FROM @tables;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

저작자표시

'Database' 카테고리의 다른 글

mysql 1406 / Data too long for column '' at row (0)	2020.11.12

PREV 1 ···4 5 6 7 8 9 10 ···21 NEXT

NUA의 개발공부로그

분류 전체보기

[Vue router] NavigationDuplicated

'Web > Vue' 카테고리의 다른 글

django.db.migrations.exceptions.InconsistentMigrationHistory

'Web > Django' 카테고리의 다른 글

[Vue router] Navigation Gaurd

Navigation gaurd

'Web > Vue' 카테고리의 다른 글

[동영상 스트리밍] 2. AWS CloudFront, S3을 이용한 동영상 스트리밍

AWS Cloudfront

동영상 스트리밍

'AWS' 카테고리의 다른 글

[동영상 스트리밍] 1. AWS MediaConvert와 Lambda, S3 연동하는 법

How to use MediaConvert & Lambda & S3

Reference

'AWS' 카테고리의 다른 글

mysql 테이블 전체 삭제

'Database' 카테고리의 다른 글

+ Recent posts

티스토리툴바