《树莓派不吃灰》第二十三期：在树莓派搭建个人摄影站

最近zhaoolee添置了一台Sony ZV1 M2， 卡片机很小巧，可以塞到兜里，大大提升了出片的速度，为了展示这些照片，本期我会搭建一个运行在树莓派的摄影网站，同时支持外部访问。

在树莓派存放的好处是可以空间便宜，机械硬盘1TB只需要几十块钱，如果使用家庭内网访问网站，即使是超大的原图，也能以极快速度打开。

树莓派通过内网穿透，也能将网站开放到互联网。

最终效果 https://photography.v2fy.com/

点击图片，可以显示大图，宽屏模式下，如果原图保留了拍摄参数，左下角会显示

摄影网站基于Github开源项目 https://github.com/rampatra/photography ，开源项目支持运行gulp resize对摄影图片进行一键裁剪，裁剪后宽度为1024px的图片作为原片放入images/full 文件夹，宽度512px的作为预览图，放入images/thumbs文件夹。

但我希望images/full 放的是最原始的图片，运行gulp resize 后，基于images/full内的图片生成预览图，放入images/thumbs即可，
于是我重写了resize这段逻辑，代码存放在 https://github.com/zhaoolee/photography

photography 这个开源项目是默认基于Github Actions构建，然后使用Github Pages托管静态页，完成发布。但是在中国，Github Pages的图片资源被特色网络搞得无法访问。

为了应对特色网络环境，我把项目改造成了：项目依然托管在Github，但在本地完成静态网站的构建，将构建完成的静态网站资源，通过rsync发送到树莓派特定文件夹，就完成了部署。同时将项目资源发布到Github仓库作为备份。

另外我还做了一些优化，将图片放入fulls文件夹，即可实时自动生成预览图，并实时展示到网页上，原版需要手动运行 gulp resize

实际操作起来，只需将图片放入images/fulls文件夹，运行npm run push , 就完成了发布，并在Github做好了备份。

获取项目, 安装依赖

git clone --depth=1 https://github.com/zhaoolee/photography.git
cd photography
bundle install
npm install
1
2
3
4

运行项目

npm run dev
1

浏览器打开http://127.0.0.1:4000 ， 就能看到zhaoolee的摄影网站展示资源，删除images/fulls 和images/thumbs 内的图片资源，将自己的图片放到images/fulls 刷新浏览器即可看到最终效果

生成静态网站

npm run build
1

运行以上命令后，会在根目录的_site文件夹生成网站所需的全部资源。

只要将_site下面的内容托管给树莓派的nginx就能对内网访问了。

在Nginx创建一个目录，用于存储_site的静态内容

sudo mkdir /usr/share/nginx/photography.v2fy.com
sudo chown www-data:www-data /usr/share/nginx/photography.v2fy.com
1
2

由于nginx默认的用户为www-data, 所以我们创建一个属于www-data 的文件夹，供Nginx使用

在树莓派的etc/nginx/conf.d 目录下新建以.conf 结尾的文件，比如photography.v2fy.com.conf, 并放入以下内容

server {
    listen 8084;
    server_name photography.v2fy.com 127.0.0.1  192.168.50.10;

    location / {
        root /usr/share/nginx/photography.v2fy.com;
        index index.html index.htm;
        try_files $uri $uri/ =404;
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后使用rsync将_site 的内容传输到/usr/share/nginx/photography.v2fy.com， 命令示例

rsync -avvz --update --no-perms --chown=www-data:www-data --delete ./_site/  root@frp:/usr/share/nginx/photography.v2fy.com/
1

传输完成后，重启nginx

sudo nginx -t
sudo nginx -s reload
1
2

我们可以使用内网访问影视站了

在树莓派的frpc.ini添加以下配置，将本地的8084映射到云服务器的8084

[photography]
type = tcp
local_ip = 127.0.0.1
local_port = 8084
remote_port = 8084
1
2
3
4
5

在服务端Nginx配置规则文件/etc/nginx/conf.d/photography.v2fy.com.conf

upstream photography_v2fy_com { server 127.0.0.1:8084; }

server {
    server_name      photography.v2fy.com;
    listen           80;

    #rewrite ^(.*)$ https://$host$1 permanent;

    location / {
        proxy_pass http://photography_v2fy_com;
        proxy_set_header Host $host:80;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    server_name  photography.v2fy.com;

    location / {
        proxy_pass http://photography_v2fy_com;
        proxy_set_header Host $host:443;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    ssl_certificate "/etc/nginx/ssl/photography.v2fy.com/fullchain.cer";
    ssl_certificate_key "/etc/nginx/ssl/photography.v2fy.com/photography.v2fy.com.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    # Load configuration files for the default server block.

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

证书配置完成后，重启服务端Nginx即可！

小结

随着手机摄影越来越强，相机厂商也越来越卷，而消费者大量购买，也会摊薄研发成本，我们可以用很低的价钱，买到很棒的相机，享受摄影的乐趣，而树莓派摄影网站，可以让我们以极低的成本，将自己的作品展示到互联网。

如果你是一个热爱摄影的人，独立的摄影网站，能为你的爱好增加几分专业，坚持更新自己的摄影网站，学习摄影，查看以往的照片，也能对摄影有更多的思考。