使用Nginx搭建静态网站

开始建站了，暂时还没想要做些什么东西。

Anyway，先搞个云服务器吧，那要怎么搭建呢？先来个最简单的。

Nginx 配置文件目录一般在 /etc/nginx/ 下，打开 nginx.conf 文件可以看到配置：

当外网用户访问服务器 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 URL 正确访问到服务器上的静态资源。

当我们在服务器上安装并启动 Nginx 之后，就可以通过 http://<域名或IP> 访问我们的网页了。所以，在浏览器中输入 http://100.2.3.4 即可。

我们观察到浏览器的地址变成了 http://100.2.3.4/index.html ，这页面是安装 Nginx 的默认站点，可以在 /usr/share/nginx/html 目录下找到。在 nginx.conf 配置文件中，有一项 root /usr/share/nginx/html 的配置，意思是当外网访问服务器 跟目录 时，Nginx 会将资源指向 /usr/share/nginx/html 的站点。

但如果输入地址，无法打开（如下截图）。

以阿里云为例，需要在云服务器添加 “安全组规则” ，添加并保存，重新刷新页面就能打开了。

我习惯将前端静态资源放置到服务器的 /data/www 下，因此将配置修改为 root /data/www 。此时访问 http://100.2.3.4 会指向 /data/www/index.html （在不配置 location 的 index 情况下，Nginx 默认配置是 index.html ）。

由于我使用的是 Mac 机器，因此可以直接在系统终端使用 scp 命令将本地文件上传到云服务器。

scp （secure copy）用于在 Linux 下进行远程拷贝文件的命令。类似于 cp ，只不过 cp 只能在本机进行拷贝，不能跨服务器。 -r 表示递归复制整个目录。

需要注意一下，下面两种的区别：

其中 1️⃣ 得到的是 /data/www/dist ，而 2️⃣ 得到的是 /data/www 。前者表示将 dist 整个目录拷贝至 /data/www 下。后者是把 dist 目录下的所有子文件和子目录都拷贝至 /data/www 。

换句话说就是，前者配置 root 的路径应该是 /data/www/dist ，后者则为 /data/www 。

效果如下：

在浏览器中访问 http://100.2.3.4 即可看到我们配置的网页了。

最简单的 Nginx 部署静态网页就完了，其他的下次再讲...

The end.

通常，我们在美化或者希望能更好的兼容搜索引擎的时候我们常常使用nginx的rewrite模块来实现，例如：我们希望原本的访问链接xxxx.com/xx/xx/xx.php?id=12，变成这种：xxx.com/xx/xx/12.html；又或者是原本的访问链接太长，我们希望能够简洁一点等等吧，下面我将针对这两种情况来做配置。

(1) 页面伪静态

将xxxx.com/xx/xx/xx.php?id=12这种访问链接变成xxx.com/xx/xx/12.html这种

下面笔者在本地的网站目录下创建一个test.php文件

原本的访问链接： http://w.myblog.com/api/php/test.php?id=1 ，我们访问看下:

需要注意的是：rewrite 完后不能写break，否则php文件无法解析。

我们使用链接: http://w.myblog.com/api/php/1.html 来访问下，

解析php的那段避免累赘，这里就不再写上了。

我们访问看下： http://w.myblog.com/api/php/test-4.html

(2) 简化访问路径

使用过tp的或者其他一些类型的php框架小伙伴们我们在访问方法时需要这样访问: http://w.tp5.com/index.php/index/index/info ，这个表示访问index模块的index控制器中的info方法，但是这么访问不太方便，我们希望去掉index.php，直接使用 http://w.tp5.com/index/index/info 访问，那我们就需要配置下nginx，做一个rewrite.

这段配置的意思是：当访问的文件或者目录不存在时，重定向到某个php文件.

!-e 意思是：-e和!-e用来判断是否存在文件或目录。

last： 相当于apache里面的[L]标记，表示rewrite.

s:表示参数.

加上配置后我们再来访问下:

发现可以正常访问了。需要注意的是：如果不写s=xxx，配置会不生效。

好了，本篇文章就到这里了，有需要补充的小伙伴欢迎在下面给我留言哦，看到会及时回复的。

---