代码语言：javascript复制
<p> </p>
<p>最近zhaoolee添置了一台Sony ZV1 M2， 卡片机很小巧，可以塞到兜里，大大提升了出片的速度，为了展示这些照片，本期我会搭建一个运行在树莓派的摄影网站，同时支持外部访问。</p>
<p>在树莓派存放的好处是可以空间便宜，机械硬盘1TB只需要几十块钱，如果使用家庭内网访问网站，即使是超大的原图，也能以极快速度打开。</p>
<p>树莓派通过内网穿透，也能将网站开放到互联网。</p>
<p>最终效果 <a href='https://photography.v2fy.com/' target='_blank' class='url'>https://photography.v2fy.com/</a></p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/kq01r4mhxzw.png" referrerpolicy="no-referrer" alt="image-20231017195700258"></p>
<p>点击图片，可以显示大图，宽屏模式下，如果原图保留了拍摄参数，左下角会显示</p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/lcvnwateleb.png" referrerpolicy="no-referrer" alt="image-20231018123048480"></p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/ty02g2kp0ws.png" referrerpolicy="no-referrer" alt="image-20231018123217978"></p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/a1pogdnpc3l.png" referrerpolicy="no-referrer" alt="image-20231018123635558"></p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/ztxde0mxjrc.png" referrerpolicy="no-referrer" alt="image-20231018123743026"></p>
<p>摄影网站基于Github开源项目 <a href='https://github.com/rampatra/photography' target='_blank' class='url'>https://github.com/rampatra/photography</a> ，开源项目支持运行<code>gulp resize</code>对摄影图片进行一键裁剪，裁剪后宽度为1024px的图片作为原片放入<code>images/full</code> 文件夹，宽度512px的作为预览图，放入<code>images/thumbs</code>文件夹。</p>
<p>但我希望<code>images/full</code> 放的是最原始的图片，运行<code>gulp resize</code> 后，基于<code>images/full</code>内的图片生成预览图，放入<code>images/thumbs</code>即可，
于是我重写了resize这段逻辑，代码存放在 <a href='https://github.com/zhaoolee/photography' target='_blank' class='url'>https://github.com/zhaoolee/photography</a></p>
<p> </p>
<p>photography 这个开源项目是默认基于Github Actions构建，然后使用Github Pages托管静态页，完成发布。但是在中国，Github Pages的图片资源被特色网络搞得无法访问。</p>
<p> </p>
<p>为了应对特色网络环境，我把项目改造成了：项目依然托管在Github，但在本地完成静态网站的构建，将构建完成的静态网站资源，通过rsync发送到树莓派特定文件夹，就完成了部署。同时将项目资源发布到Github仓库作为备份。</p>
<p>另外我还做了一些优化，将图片放入fulls文件夹，即可实时自动生成预览图，并实时展示到网页上，原版需要手动运行 <code>gulp resize</code></p>
<p>实际操作起来，只需将图片放入<code>images/fulls</code>文件夹，运行<code>npm run push</code> , 就完成了发布，并在Github做好了备份。</p>
<p> </p>
<h2>获取项目, 安装依赖</h2>
<pre><code>git clone --depth=1 https://github.com/zhaoolee/photography.git
cd photography
bundle install
npm install
</code></pre>
<p> </p>
<h2>运行项目</h2>
<pre><code>npm run dev
</code></pre>
<p>浏览器打开<code>http://127.0.0.1:4000</code> ， 就能看到zhaoolee的摄影网站展示资源，删除<code>images/fulls</code> 和<code>images/thumbs</code> 内的图片资源，将自己的图片放到<code>images/fulls</code> 刷新浏览器即可看到最终效果</p>
<h2>生成静态网站</h2>
<pre><code>npm run build
</code></pre>
<p>运行以上命令后，会在根目录的<code>_site</code>文件夹生成网站所需的全部资源。</p>
<p> </p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/0unmfoysv0l.png" referrerpolicy="no-referrer" alt="image-20231018150456563"></p>
<p>只要将<code>_site</code>下面的内容托管给树莓派的nginx就能对内网访问了。</p>
<p>在Nginx创建一个目录，用于存储<code>_site</code>的静态内容</p>
<pre><code>sudo mkdir /usr/share/nginx/photography.v2fy.com
sudo chown www-data:www-data /usr/share/nginx/photography.v2fy.com
</code></pre>
<p>由于nginx默认的用户为<code>www-data</code>, 所以我们创建一个属于<code>www-data</code> 的文件夹，供Nginx使用</p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/m5ah2ht2kbk.png" referrerpolicy="no-referrer" alt="image-20231018151304146"></p>
<p> </p>
<p>在树莓派的<code>etc/nginx/conf.d</code> 目录下新建以<code>.conf</code> 结尾的文件，比如<code>photography.v2fy.com.conf</code>, 并放入以下内容</p>
<pre><code>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;
}
}
</code></pre>
<p> </p>
<p>然后使用rsync将<code>_site</code> 的内容传输到<code>/usr/share/nginx/photography.v2fy.com</code>， 命令示例</p>
<pre><code>rsync -avvz --update --no-perms --chown=www-data:www-data --delete ./_site/ root@frp:/usr/share/nginx/photography.v2fy.com/
</code></pre>
<p>传输完成后，重启nginx</p>
<pre><code>sudo nginx -t
sudo nginx -s reload
</code></pre>
<p>我们可以使用内网访问影视站了</p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/qmprsggmohf.png" referrerpolicy="no-referrer" alt="image-20231018151723132"></p>
<p>在树莓派的frpc.ini添加以下配置，将本地的8084映射到云服务器的8084</p>
<pre><code>[photography]
type = tcp
local_ip = 127.0.0.1
local_port = 8084
remote_port = 8084
</code></pre>
<p>在服务端Nginx配置规则文件<code>/etc/nginx/conf.d/photography.v2fy.com.conf</code></p>
<pre><code>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 {
}
}
</code></pre>
<p>证书配置完成后，重启服务端Nginx即可！</p>
<p><img src="https://img.yuanmabao.com/zijie/pic/2023/10/23/cfmyebt0t3w.png" referrerpolicy="no-referrer" alt="image-20231018153742966"></p>
<h2>小结</h2>
<p>随着手机摄影越来越强，相机厂商也越来越卷，而消费者大量购买，也会摊薄研发成本，我们可以用很低的价钱，买到很棒的相机，享受摄影的乐趣，而树莓派摄影网站，可以让我们以极低的成本，将自己的作品展示到互联网。</p>
<p>如果你是一个热爱摄影的人，独立的摄影网站，能为你的爱好增加几分专业，坚持更新自己的摄影网站，学习摄影，查看以往的照片，也能对摄影有更多的思考。</p>
