网页部署到服务器以及浏览器预览PDF

最近要找工作，做了一些html文件，想要放在网站上，将链接放到简历上。让人家直接预览自己所做的工作，并且将自己做的报告放到网上，实现直接预览PDF功能。

知道这些需求之后，我就开始行动了。趁着自己还是学生。买了阿里的一个月的云服务器。一个月9.5。感觉还行吧。虽然比本科的时候，1元一个月的。

阿里云跟腾讯云相比确实好用很多。有很多镜像可以使用。例如WordPress、LAMP环境等等。

在这里，为了方便，我们选择了基于Centos的LAMP的应用镜像。之所以没有选择WordPress的，是因为我们这里并不是想用WordPress，而是只是想使用Apache服务器。

好了，选择好系统之后，如下图所示，我们选择安全->防火墙->添加规则

然后将FTP端口加入到规则中。这样我们就能使用FTP连接到服务器了。

为了安全起见，我们需要点击服务器运维->远程连接->设置密码，设置好密码。

准备好这些活动后，我们就开始吧～

下面所有的操作客户端环境均为Ubuntu 16.04

网页部署

首先ssh连接到服务器，输入以下指令，输入密码，即可连接到服务器啊。

1	ssh -l root 47.103.17.102

查看Apache服务器默认解析的目录

1 2	/usr/local/apache/conf cat httpd.conf

然后可以看到如下的字样，所以在我的这个服务器默认解析的地址为/home/www/htdocs。为了方便，我这里不更换解析地址了，保持默认。

1 2	DocumentRoot "/home/www/htdocs" <Directory "/home/www/htdocs">

知道了Apache默认目录后，将网站上传到该目录。首先使用sftp链接到服务器

1	sftp root@47.103.17.102

这里我使用了默认端口，如果你的为自定义端口，以27950为例，对应的指令为sftp -P 27950 root@47.103.17.102。

我们网页的文件在/home/zdaiot/Download下，文件为ZD.tar.gz。所以在上面打开的sftp端口，输入指令为

1 2	cd /home/www/htdocs put /home/zdaiot/Download/ZD.tar.gz

若想下载文件，指令为pull 文件

接着，回到我们的ssh终端。将上传的文件解压

1 2	cd /home/www/htdocs tar -zxvf ZD.tar.gz

此时我们的网站目录，即/home/www/htdocs。文件样例如下，注意，若我们直接输入域名或者IP地址，不加任何后缀，是直接指向index.html文件的。

这里在网上找了一个图，只是为了说明，网站是在/home/www/htdocs根目录的，不需要再新建文件夹。

此时，在浏览器终端输入http://47.103.17.102就能访问了。但是发现，css文件、js文件和资源文件均没有加载进来。打开浏览器调试，提示说

1	Failed to load resource: the server responded with a status of 403 (Forbidden)

经验告诉我，这应该是网站文件夹全新的问题，在ssh终端，更改如下：

1 2	cd /home/www chmod -R 755 htdocs/

此时在浏览器输入http://47.103.17.102应该就正常了。

浏览器预览PDF

关于这个功能，还不太清楚能不能实现。但是考虑arxiv.org实现了相关功能。应该有开源项目吧。果然一搜是有的，github地址

但是，感觉按照readme中的写法，感觉还是有点复杂。在网上找到了一个简单的教程。

首先，从官网下载文件。如下所示，我们这里下载Stable。

我们直接下载并解压到服务器，在上面图中，双右击Stable，选择Copy link address。在ssh终端中输入：

cd /home/www/htdocs
mkdir PDF.js
cd PDF.js
wget https://github.com/mozilla/pdf.js/releases/download/v2.1.266/pdfjs-2.1.266-dist.zip
unzip pdfjs-2.1.266-dist.zip

此时，/home/www/htdocs/PDF.js的文件如下：

此时，输入http://47.103.17.102/PDF.js/web/viewer.html就能访问PDF文件了。

但是此时是默认的PDF文件，如何自定义访问的PDF文件呢？

首先，在SFTP终端中，输入

1 2	cd /home/www/htdocs put /home/zdaiot/Downloads/d2l-zh.pdf

此时，就可以指定访问该pdf文件了。在浏览器中输入http://47.103.17.102/PDF.js/web/viewer.html?file=http://47.103.17.102/d2l-zh.pdf

但是，这个名字好长啊，让我感觉不爽。在摸索之后，发现它默认访问的PDF文件保存在了cd /home/www/htdocs/PDF.js/web/文件夹下的。所以我就摸索出了下面的方法，将我们自己的PDF文件也放在这个文件夹。在SFTP终端中，输入

1 2	cd /home/www/htdocs/PDF.js/web/ put /home/zdaiot/Downloads/d2l-zh.pdf

此时，就可以在浏览器输入http://47.103.17.102/PDF.js/web/viewer.html?file=d2l-zh.pdf访问这个PDF了。效果如下：

好了，教程就到此结束了。

缩短链接

本来应该结束的，但是现在的链接还是太长了。于是乎，就有了下面的步骤。首先为了调试方便，我在本地Ubuntu16.04系统下安装了Apache服务器。

1	sudo apt-get install apache2

接着在本地浏览器输入127.0.0.1就可以看到网址了。该Apache默认解析地址为/var/www/html。接着开始我们的PDF.js的改造过程。首先，解压我们下载的pdfjs-2.1.266-dist.zip。得到的目录如下。

我们的网址为http://47.103.17.102/PDF.js/web/viewer.html?file=d2l-zh.pdf。IP地址后面有一个web，我们想办法把这一级目录给去掉。使用Vscode打开这个目录，搜索所有的../build/build下的文件，全部换成build下的文件。例如搜索../build/pdf.worker.js，换成pdf.worker.js。

然后就可以将所有的build的文件夹放入web文件夹中了。IP地址后面还有一个?file=d2l-zh.pdf，为了简便，我们将默认的文档换成我们的文档。方法为搜索compressed.tracemonkey-pldi-09.pdf，全部替换为report.pdf。

再分析，感觉viewer.html名字有点长，直接重命名为qs，发现可以解析。

此时，将所有改过的文件上传到我们服务器/home/www/htdocs/PDF.js/web目录。

尝试更改所有的?file=为?、?=、?f=均失败。直接替换为空也不行。

最后，IP地址下有一个目录为PDF.js，这个是我们自己建立的。直接将PDF.js/web目录下的所有文件移动到/home/www/htdocs目录。但是出现了一个问题，我的PDF.js/web目录下有images文件夹，而/home/www/htdocs也有同名的文件夹。解决方法为使用指令