July 08, 2017TWpower Reading time ~1 minute

[iOS] Kingfisher에서 이미지 요청할 때 한글이 있을 경우 처리하기

Kingfisher를 사용할 때 요청 url에 한국어가 들어가 있을 때 어떻게 처리하는지 알아보자

환경

Swift
Cocoa Pods
Xcode and Emulator

Kingfisher

Kingfisher란 홈페이지에 있는 문구를 인용하면 “A lightweight, pure-Swift library for downloading and caching images from the web.”라고 나와있다.

아주 간단하게 웹에 있는 url을 통해서 이미지를 불러오는 라이브러리라고 할 수 있습니다.

아주 간단한 예는 아래와 같습니다.

example.swift

let url = URL(string: "url_of_your_image")
imageView.kf.setImage(with: url)

Kingfisher에서 요청 할 때 url에 한국어가 포함되어 있을 때

프로젝트를 진행하는데 url에 한국어가 있을 때 이미지를 로딩하지 못하는 상항이 발생하였는데 다음 아래와 같이 간단한 코드를 통해서 해결이 가능하다. addingPercentEncoding을 이용하면 된다.

example.swift

// 원하는 urlString을 addingPercentEncoding을 통해 바꿔줍니다.
let urlString = urlString?.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)

// 그 후 원하는 ImageView에 적용시키시면 됩니다.
imageView.kf.setImage(with: URL(string: urlString), placeholder: defaultImg, options: [.transition(ImageTransition.fade(0.5))])

June 25, 2017TWpower Reading time ~1 minute

[Circle CI] Circle CI에서 결과를 이미지 파일로 저장하기

Circle CI에서 코드에서 실행된 결과물을 이미지로 저장해보자

환경

Python
Selenium
Circle CI and Project

Circle Artifact

Circle CI에서 원할 때 화면을 캡처해서 저장할 수 있다.

기본적으로 Circle CI에서 CIRCLE_ARTIFACTS라는 환경변수를 따로 저장해두는데 이 환경변수 값을 불러와서 저장이 가능하다. 사진을 저장하는 예제는 아래와 같다.

os.environ['CIRCLE_ARTIFACTS'] + '/name.png'의 형식에서 name.png에 다른 이름 형식을 넣어서 원하는 형식으로 저장 할 수 있다.

example.py

if 'CIRCLE_ARTIFACTS' in os.environ:
    # dirver = Selenium Web Browser
    driver.get_screenshot_as_file(os.environ['CIRCLE_ARTIFACTS'] + '/name.png')

참고자료

https://circleci.com/docs/1.0/build-artifacts/

June 22, 2017TWpower Reading time ~1 minute

[Nginx] Nginx에서 가상서버 환경 설정하기

Nginx에서 sites-available 폴더에 .conf 파일을 추가해서 가상서버를 만들어보자.

환경 및 선수조건

Nginx(nginx/1.10.0 (Ubuntu))
Nginx의 기본 사용법 및 서버 블록에 대한 이해

Nginx의 기본 파일과 폴더들

Ubuntu에서 apt-get을 통해 nginx 설치하기 및 간단한 정리에서 간단하게 정리를 해두긴 했지만 설정을 하기에 앞서서 간단하게 몇가지 기본 폴더들과 파일들을 보고 가겠습니다.

sites-available: 가상 서버 환경들에 대한 설정 파일들이 위치하는 부분입니다. 가상 서버를 사용하거나 사용하지 않던간에 그에 대한 설정 파일들이 위치하는 곳입니다.
sites-enabled: sites-available에 있는 가상 서버 파일들중에서 실행시키고 싶은 파일을 symlink로 연결한 폴더입니다. 실제로 이 폴더에 위치한 가상서버 환경 파일들을 읽어서 서버를 세팅합니다.
nginx.conf: Nginx에 관한 설정파일로 Nginx 설정에 관한 블록들이 작성되어 있으며 이 파일에서 sites-enabled 폴더에 있는 파일들을 가져옵니다.

nginx 가성서버 파일 생성

위에서 말씀드린대로 sites-available에 가상 서버 환경 파일을 작성하시면 됩니다.

가상 서버 환경 파일을 만들고 vim으로 열어줍니다.

$ cd /etc/nginx/sites-available
$ sudo touch [virtual_server_conf_file_name]
$ sudo vim [virtual_server_conf_file_name]

Nginx 가상서버 파일 작성

열어둔 설정 파일에 아래처럼 기본적인 블록들을 작성합니다.

[domain name], [upstream name] 그리고 [web root directory path]는 원하는 서버 환경에 따라서 넣어주시면 됩니다.

간단하게 server block만 추가하면 아래와 같습니다.

virtual_server_conf_file_name(no SSL)

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/html;

        server_name [domain name];

        location / {
            try_files $uri $uri/ =404;
        }
}

아래는 SSL을 적용한 저희 서비스의 모습입니다.

virtual_server_conf_file_name(SSL)

upstream [upstream name] {
    server unix://[unix socket file path];
}

server {
    listen 443 ssl;

    root [web root directory path];
    index index.html index.htm;

    server_name [domain name];

    # SSL Setting below
    ...
    # SSL Setting above

    location / {
        try_files $uri $uri/ =404;
    }

    location /api {
        ...
    }

    # SSL Setting (Let's Encrypt)
    location ~ /.well-known {
            allow all;
    }
}

server {
    listen 80;
    listen [::]:80;

    server_name [domain name]];
    return 301 https://$host$request_uri;
}

sites-enabled에 symlink 생성하기

이제 sites-available에 있는 파일들에 대해서 sites-enabled에 symlink를 추가합시다.

$ cd /etc/nginx/sites-enabled
$ sudo ln -s /etc/nginx/sites-available/[config file name] /etc/nginx/sites-enabled/
$ sudo ln -s /etc/nginx/sites-available/[config file name] /etc/nginx/sites-enabled/

Nginx 재시작하기

이제 Nginx에 문법이 제대로 되어있는지 확인하고 재시작을 합니다.

제대로 재시작이 완료가 되면 OK라고 나와야 합니다.

$ sudo nginx -t

// 재시작은 아래에 있는 명령어 중 하나로 실행하시면 됩니다.
$ sudo service nginx restart
$ sudo systemctl restart nginx
$ sudo /etc/init.d/nginx restart

June 16, 2017TWpower Reading time ~1 minute

[Python] pyenv와 virtualenv에서 python에 newrelic apm 사용하기

업데이트(2018.04.29): 내용을 조금 보완하였습니다.

python을 통한 서버를 돌릴 때 newrelic을 사용하는 방법을 알아보고 나아가 pyenv와 virtualenv를 사용하는 환경에서 나타나는 오류를 어떻게 해결했는지 알아보자

환경

python(with Django)
pyenv 및 virtualenv

newrelic 연동하기

먼저 newrelic 사이트에 들어가서 가입을 하고 로그인을 하면 아래와 같은 창이 나오며 아래에서 APM을 선택합니다.

New Relic Page

다음 메뉴에서 python을 선택합니다.

Choose Language

위에서 python을 선택하게 되면 1~5까지 어떻게 하면 실행하면 되는지 자세하게 나와있습니다. 상세하게 설명이 되어 있으니 여기서는 간단하게만 요약해서 보여드리겠습니다.

Reveal license key를 클릭해서 키를 발급 받습니다.
사용하고자 하는 프로젝트 혹은 파이썬 가상환경에서 newrelic 파이썬 패키지를 설치합니다.

$ pip install newrelic

아래 명령어를 통해서 위에서 만든 license key를 통해 newrelic.ini 파일을 생성합니다. 이는 프로젝트 폴더 안에 두는것이 좋습니다.

$ newrelic-admin generate-config <your-key-goes-here> newrelic.ini

NEW_RELIC_CONFIG_FILE 다음에는 위에서 만든 newrelic.ini이 오게하고 run-program 다음에는 원하는 서버 명령어를 입력하시면 됩니다. 저희 django 같은 경우 python manage.py runserver와 같은 명령어를 넣어주시면 됩니다.

$ NEW_RELIC_CONFIG_FILE=newrelic.ini newrelic-admin run-program YOUR_COMMAND_OPTIONS

이제 서버에서 newrelic으로 통신이 오고가면 관리페이지로 이동합니다.

pyenv와 virtualenv에서 newrelic 연동하기

파이썬의 경우 가상환경을 만들어서 실행하는 경우가 많은데 pyenv와 virtualenv를 통해서 실행한 경우에 가끔 다음과 같이 django을 찾을 수 없다고 나올 때가 있습니다.

이 문제는 현재 django가 없다고 합니다. 분명히 설치했는데도 이런 오류가 생기는거면 sys.path를 통해서 저희가 사용하는 가상 환경과 패키지 파일들이 들어가 있는지 확인하는것이 좋습니다.

ImportError: No module named 'django'
unable to load app 0 (mountpoint='') (callable not found or import error)
*** no app loaded. going in full dynamic mode ***
Traceback (most recent call last):
  File "./linku/wsgi.py", line 12, in <module>
    from django.core.wsgi import get_wsgi_application
ImportError: No module named 'django'
unable to load app 0 (mountpoint='') (callable not found or import error)

위와 같은 경우에 sys.path가 /home/linku/.pyenv/versions/[virtualenv name]/lib/python3.5/site-packages에서 모듈들을 가져오지 않아서 생기는 문제인데 wsgi.py에 위의 경로를 sys.path에 추가해주면 일단 해결이 됩니다. 당연히 이 경로는 사용하시는 분에 따라서 다르며 virtualenv는 설정하신 이름으로 넣어주셔야합니다.

wsgi.py

import os
import sys
sys.path.append('/home/linku/.pyenv/versions/[virtualenv name]/lib/python3.5/site-packages')
from django.core.wsgi import get_wsgi_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "[your project name].settings")

application = get_wsgi_application()

June 11, 2017TWpower Reading time ~2 minutes

[Nginx] Nginx에 간단하게 gzip 압축 설정하기

Nginx에 gzip 설정을 추가하자

환경

Nginx

웹 사이트 압축?

우리가 흔히 사용하는 웹브라우저 및 통신은 HTTP에 기반한 통신이 많습니다.

그러한 웹 통신에서 속도를 개선하기 위해 많은 노력들이 이루어져 왔고 그러한 노력의 결과로 gzip, 브라우저 캐싱, js 및 css 압축 그리고 CDN(contents delivery network)과 같은 여러 방식들이 나왔습니다.

위에 나온 여러 방법들이 존재하지만 nginx에서 가장 쉽게 설정 할 수 있고 웹서비스를 할 때 기본중에 기본인 gzip을 설정하는 방법에 대해서 알아보겠습니다.

gzip이란?

위키피디아에서 가져온 내용을 발췌하면 아래와 같습니다.

gzip은 파일 압축에 쓰이는 응용 소프트웨어이다. gzip은 GNU zip의 준말이며, 초기 유닉스 시스템에 쓰이던 압축 프로그램을 대체하기 위한 자유 소프트웨어이다. gzip은 Jean-loup Gailly와 마크 애들러가 만들었다. 버전 0.1은 1992년 10월 31일에 처음 공개되었으며, 버전 1.0이 1993년 2월에 뒤따라 나왔다. 오픈BSD의 gzip 버전은 더 오래된 압축 프로그램을 기반으로 하고 있으며, 오픈BSD 3.4에 추가되었다.

즉, 쉽게 정리하면 gzip은 압축 프로그램 및 방식이라고 할 수 있습니다. 구체적으로 어떠한 방식과 원리로 압축을 하는지에 대해서는 포스팅하지 않겠으나 LZ77과 허프만 코딩을 조합한 DEFLATE알고리즘에 기반하여 구현한다고 합니다.

Nginx에서 gzip설정하기

Nginx에서 gzip 설정하는 부분

Nginx를 apt-get을 통해서 패키지로 설치를 했다면 /etc/nginx경로에 있는 nginx.conf에서 설정이 가능합니다.

또한 패키지를 통해 설치를 하셨다면 다음처럼 nginx.conf의 http블록 안에 Gzip Settings라고 나와있습니다.

nginx.conf

http {

    ...

    ##
    # Gzip Settings
    ##

    // 이 아래 설정들이 주석처리 되어있거나 설정되어 있을 수도 있습니다.

    gzip on;
    gzip_disable "msie6";

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ...
}

Nginx에서 gzip 설정하기

간단하게 위에 있는대로 주석이 nginx.conf에 나와있고 주석을 제거해주시면 되고 만약 해당 부분이 없다면 아래부분을 nginx.conf의 http블록에 그대로 추가해주시면 됩니다.

nginx.conf

...

http{

    ...

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    ...

}

...

각각에 대한 내용은 nginx 공식문서를 참고하면 다음과 같습니다.

gzip [on/orr]: gzip의 설정을 on/off하는 명령어입니다.
gzip_disable [regex]: 해당 명령어 다음에 오는 문장이 요청 헤더에 User-Agent와 일치하면 gzip을 하지 않습니다.
gzip_vary [on/off]: gzip, gzip_static, or gunzip의 설정들이 on으로 되어있을 때 응답 헤더에 “Vary: Accept-Encoding”를 넣을지 말지에 대한 명령어 입니다.
gzip_proxied: 요청과 응답에 따라서 프록시된 요청에 대해서 gzipping을 할지 말지에 대한 설정입니다. “any”로 설정하면 모든 응답에 대해서 gzipping을 수행합니다.
gzip_comp_level [level]: 응답에 대한 압축의 정도를 의미하며 level의 값은 1부터 9까지 가능합니다.
gzip_buffers [num] [size]: num은 버퍼의 갯수를 의미하며 size는 그 버퍼의 크기를 의미합니다.
gzip_http_version [versino]: minimum HTTP 통신의 버전을 정합니다.
gzip_types [types in array]: “text/html”을 제외하고 MIME 타입에서 또 어떠한 응답 형태들을 gzipping 할지 정할 수 있습니다.

Nginx에서 gzip 설정 적용하기

이제 바뀐 설정을 적용해보도록 하겠습니다. 반드시 재시작 했다는 문구가 나와야합니다!

$ sudo /etc/init.d/nginx restart

or

$ sudo service nginx restart

or

$ sudo systemctl restart nginx

적용결과

이제 gzip을 적용하면 제대로된 응답 요청에 대해서(HTTP STATUS CODE가 200) 다음 처럼 응답 헤더에 Content-Encoding:gzip가 표시됨을 알 수 있습니다.

Response Header

참고자료

Nginx 공식 문서 gzip(http://nginx.org/en/docs/http/ngx_http_gzip_module.html)

Categories

Tags

Posts

About

Home

Welcome to TWpower's Tech Blog

[iOS] Kingfisher에서 이미지 요청할 때 한글이 있을 경우 처리하기

환경

Kingfisher

Kingfisher에서 요청 할 때 url에 한국어가 포함되어 있을 때

[Circle CI] Circle CI에서 결과를 이미지 파일로 저장하기

환경

Circle Artifact

참고자료

[Nginx] Nginx에서 가상서버 환경 설정하기

환경 및 선수조건

Nginx의 기본 파일과 폴더들

nginx 가성서버 파일 생성

Nginx 가상서버 파일 작성

sites-enabled에 symlink 생성하기

Nginx 재시작하기

[Python] pyenv와 virtualenv에서 python에 newrelic apm 사용하기

환경

newrelic 연동하기

pyenv와 virtualenv에서 newrelic 연동하기

[Nginx] Nginx에 간단하게 gzip 압축 설정하기

환경

웹 사이트 압축?

gzip이란?

Nginx에서 gzip설정하기

Nginx에서 gzip 설정하는 부분

Nginx에서 gzip 설정하기

Nginx에서 gzip 설정 적용하기

적용결과

참고자료