nginx 에 vue 연동하기 (403 Error 해결)

기본설정파일은 다룰줄 안다는 전제하에 필요한 부분만 정리하였다.

 

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;


    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    underscores_in_headers on;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

        location / {
        	try_files $uri $uri/ @rewrites;
        	root 	/home/user/ui/dist;
        }

        location @rewrites {
        	rewrite	^(.+)$ /index.html last;
        }
    }
}

 

server scope 와 location scope 가 핵심이다.

 

이렇게 설정한 뒤 syntax 체크 후 reload 를 해주면 설정이 끝난다.

 

$ nginx -t

$ service nginx reload

 

하지만 접속을 해보면 403 에러가 발생했다.

 

nginx 에서 ui 경로의 파일을 읽지 못하는 케이스로 ui 경로에서 아래 커맨드를 입력하면 해결된다.

 

$ chcon -R -t httpd_sys_content_t dist