PDF 파일을 나만의 웹 서버에서 공유해보자 (뷰어를 통한 공유도 가능!)

내가 가지고 있는 PDF 파일을 웹에 게시하고 공유하고 싶은데, 노션이나 구글 클라우드를 통해 링크를 공유하는 것은 싫은 사람들을 위한 게시글입니다. 그렇지만 이 방식을 적용하기 위해서는 클라우드 환경의 인스턴스나 시놀로지와 같은 개인 서버가 있고, 해당 서버가 도메인을 통해 연결되어 있어서 원격 접속이 가능한 상태여야 합니다.

PDF 파일을 나만의 웹 서버에서 공유해보자 (뷰어를 통한 공유도 가능!)

PDF 파일을 웹에서 공유하기

1. 준비물

2. PDF를 웹 상에 업로드하기

3. 커스 텀 뷰어를 사용하는 경우

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

준비물

클라우드 인스턴스 또는 시놀로지와 같은 서버
Docker
게시할 PDF 파일

PDF를 웹 상에 업로드하기

먼저, 기본적인 원리를 알려드리자면 도커 엔진에서 아파치 웹 서버를 구동합니다.
아파치 웹 서버를 사용하면 정적 리소스들을 처리할 수 있습니다. 예를 들어, HTML파일이나 현재 공유하려고 하는 PDF, 그리고 이미지 파일들이 있습니다.
도커 엔진에서 아파치 웹 서버를 실행시킵니다. 이 때, 아파치 웹 서버의 default 경로를 서버의 특정 디렉토리와 마운트 합니다.
왜냐하면 파일의 변경이 잦을 수 있기에 그 때마다 컨테이너로 복사해서 넣는 것은 힘드므로 서버의 특정 디렉토리를 웹 서버 컨테이너에서 자유롭게 접근가능하도록 설정하는 것입니다.
아파치 웹 서버의 default 경로, index.html이 있는 경로가 /usr/local/apache2/htdocs/이므로 서버에서 pdf라는 폴더를 생성하고 해당 경로로 마운트를 해줍니다.

# 서버에 pdf 폴더 생성
mkdir ~/pdf

# 아파치 웹 서버 컨테이너 실행
docker run -dit --name apache -p 8888:80 -v ~/pdf:/usr/local/apache2/htdocs httpd

이제 게시하고 싶은 파일을 앞서 만들었던 pdf 폴더 안에 넣으면 아파치 웹 서버를 통해서 접근 가능합니다.
컨테이너의 외부 포트가 8888에 연결되어 있으므로, http://localhost:8888/pdf파일이름.pdf 로 접속하면 내가 올린 pdf파일을 볼 수 있습니다.
만약 서버의 nginx를 통해 외부에서 접근하고 싶다면, 아래와 같이 reverse proxy를 구성할 수 있습니다.
아래의 nginx 설정 파일은 Https를 사용하지 않는 경우를 기준으로 작성됩니다.
/etc/nginx/conf.d/pdf.conf 파일을 생성하고, 편집기를 이용해 작성해줍니다.

server {
	listen 80;
	server_name pdf.서버도메인주소;
    
    location / {
    	proxy_pass http://localhost:8888;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

작성이 완료되면 sudo systemctl restart nginx 명령어를 통해 nginx를 재시작합니다.
그러면 http://pdf.서버도메인주소/pdf파일이름.pdf 로 접속하면 컨테이너에 있는 pdf 파일을 불러올 수 있습니다.
이렇게 띄워진 pdf는 웹 브라우저에 내장된 pdf 뷰어를 사용해 보여지는 결과입니다.
예를 들어, 서버의 pdf 폴더 내에 /subject 폴더를 만들고, 그 안에 1.pdf 를 저장하는 경우라면, http://pdf.서버도메인주소/subject/1.pdf 로 접근 가능합니다.

커스텀 뷰어를 사용하는 경우

pdf.js 라는 이미 만들어져 있는 모듈을 사용할 수 있습니다.
먼저, 서버의 /pdf 폴더 내에서 해당 라이브러리를 다운받습니다.

wget https://github.com/mozilla/pdf.js/releases/download/v4.5.136/pdfjs-4.5.136-dist.zip

해당 파일은 https://mozilla.github.io/pdf.js/getting_started/#download 에서도 다운받을 수 있습니다.
Prebuilt (Modern browser) 버전으로 다운받습니다.
서버에 다운이 되었으면 압축을 풀어줍시다.

unzip pdfjs-4.5.136-dist.zip -d .

그러면 pdf 파일 안에 여러 개의 폴더가 생길텐데, 저희는 pdf/web/viewer.html을 html의 iframe에 불러와 사용할 예정입니다.
먼저, pdf 폴더 내에 기본적으로 보여질 페이지 index.html을 작성해줍시다.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF test</title>
</head>
<body>
        <iframe src="./web/viewer.html?file=1.pdf" style="display:block; width:100%; height: 100vh"></iframe>
</body>
</html>

여기서 iframe의 src에서 ?file={pdf 파일의 상대 경로} 를 작성해줘야 합니다.
저같은 경우 1.pdf를 /pdf/web 폴더 안에 넣었기 때문에, viewer.html 기준으로 자신과 같은 디렉토리에 위치하므로 1.pdf를 바로 지정할 수 있었습니다.
해당 구조를 나타내면 아래와 같이 나타낼 수 있습니다.

pdf
|--index.html
|--web
|----viewer.html
|----1.pdf
...

이렇게 설정이 완료되면, 아파치 웹 서버에 접속하는 경우, 기본 html인 index.html이 반환되고, 사용자는 커스텀 뷰어를 통해 1.pdf가 볼 수 있습니다.
다른 html 파일들을 생성하고, 해당 파일들에서 각각 다른 pdf를 뷰어로 보이게도 할 수 있습니다.
만약 2.html을 생성했다면, http://pdf.서버도메인/2.html 과 같이 접속해야 합니다.

저는 이런 방식으로 포트폴리오 pdf를 웹 서버에서 공유하고 있습니다. 개발자들에게 포트폴리오 링크를 첨부하라고 하는 경우가 있는데 pdf를 그냥 구글 클라우드와 같은 곳에 올리고 다운받게 하는 것은 재미가 없으니까, 커스텀 뷰어를 통해 공유하는 방법을 생각해냈습니다. 이 경우 포트폴리오가 pdf 더라도 미리보기 뿐만 아니라 다운도 가능하다는 장점이 있는 것 같습니다.

위에서 보여주지는 않았지만 커스텀 뷰어와 내장 뷰어를 사용할 때의 차이는 아래의 두 웹 사이트를 접근해서 확인할 수 있습니다. 아래의 웹 사이트는 제 포트폴리오 pdf를 담고 있습니다.

1) 내장 뷰어 사용 - https://pdf.dobby.kr/web/portfolio.pdf

2) 커스텀 뷰어 사용 - https://pdf.dobby.kr/

Redis의 고가용성 전략(Sentinel, Clustering) (0)	2025.01.19
Spring Web MVC에서 Spring session redis 적용 (0)	2025.01.19
적절한 DB Connection Pool 설정하기 (0)	2025.01.01
Servlet & JSP 기반의 웹 앱에 관계형 데이터베이스 연동하기 (MySQL, DBCP) (0)	2024.08.26
Servlet & JSP를 사용해 MVC Model 2 패턴의 웹 앱 제작 기초 (1)	2024.08.25

아 맞다, 그거

PDF 파일을 나만의 웹 서버에서 공유해보자 (뷰어를 통한 공유도 가능!)