【博客】前端新手如何创建自己的个人网站相册

文章目录

前言
前提条件
[part 1 服务器docker拉取官方镜像](#part 1 服务器docker拉取官方镜像)
[part2 运行](#part2 运行)
- [2.1 建立自己的配置文件.env](#2.1 建立自己的配置文件.env)
- [2.2 命令行运行](#2.2 命令行运行)
[part3 反向代理到自己的域名](#part3 反向代理到自己的域名)
[part 4 S3存储照片设置（云存储）](#part 4 S3存储照片设置（云存储）)
[part5 关于更新docker或者重启](#part5 关于更新docker或者重启)
结尾

前言

偶然间在GitHub看到有一个创建个人相册的项目https://github.com/HoshinoSuzumi/chronoframe，觉得还挺美观的。再加上自己开始慢慢有想着记录生活的习惯，特别是用相机来记录。至少可以让记忆暂时留存。至少去过某些地方，见过某些风景，虽然不多，但至少是宝贵的记忆。

本人是纯纯的前端小白，只会根据AI的提示修改东西。所以想记录一下新手怎么搭建自己的个人相册

有兴趣的可以看下我搭建后的效果如下：

bash 复制代码

https://photo.qianx.site/

还有很多不足，希望大家给下指点。

前提条件

首先我有自己的域名（179/10年），有自己的云服务器（99/年），有七牛云的对象存储空间（10G免费，流量0.29/G）有这些条件后就开始构建自己的个人相册了。

part 1 服务器docker拉取官方镜像

bash 复制代码

docker pull ghcr.io/hoshinosuzumi/chronoframe:latest
# 或
docker pull hoshinosuzumi/chronoframe:latest

part2 运行

2.1 建立自己的配置文件.env

这个.env文件是在root目录创建的，目的是配置个人信息。以下是这个文件的默认写入：

bash 复制代码

# 管理员邮箱（必须）
CFRAME_ADMIN_EMAIL=
# 管理员用户名（可选，默认 ChronoFrame）
CFRAME_ADMIN_NAME=
# 管理员密码（可选，默认 CF1234@!）
CFRAME_ADMIN_PASSWORD=

# 站点信息（均可选）
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AUTHOR=
NUXT_PUBLIC_APP_AVATAR_URL=

# 地图提供器 (maplibre/mapbox)
NUXT_PUBLIC_MAP_PROVIDER=maplibre
# 使用 MapLibre 需要 MapTiler 访问令牌
NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=
# 使用 Mapbox 需要 Mapbox 访问令牌
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

# 存储提供者（local 或 s3 或 openlist）
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage

# 会话密码（必须，32 位随机字符串）
NUXT_SESSION_PASSWORD=

2.2 命令行运行

然后就可以直接在服务器中运行这个项目了，默认端口是你云服务器的ip:3000。

bash 复制代码

docker run -d --name chronoframe -p 3000:3000 -v $(pwd)/data:/app/data --env-file .env ghcr.io/hoshinosuzumi/chronoframe:latest

然后你输入你的云服务器ip:3000就可以看到你的本地网站了！如果看不到，其实可能是云服务器没开放相应的端口，如下设置一下即可浏览。

part3 反向代理到自己的域名

我用的是宝塔建的网站，这个工具挺好用，很多设置直接可视化设置，利用我可以直接建站点photo.qianx.site ，然后选择静态，不需要PHP！然后修改配置文件的反向代理就可以啦！删除原来的location，添加为以下端口设置：

bash 复制代码

 location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $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;
        proxy_cache_bypass $http_upgrade;
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    location ~* \.(jpg|jpeg|png|gif|webp|svg|css|js|ico|woff|woff2|ttf|eot)$ {
        proxy_pass http://localhost:3000;
        expires 1y;
        add_header Cache-Control "public, immutable";
        proxy_set_header Host $host;
    }

然后就可以使用你的域名访问你的相册网站啦。

part 4 S3存储照片设置（云存储）

我本身使用的是七牛云对象存储，因为他是有免费10G的存储空间的，我只需要把我.env设置中的本地存储修改为七牛云的S3相关信息就行。具体可见官网的配置文件手册https://chronoframe.bh8.ga/guide/configuration.html 或直接看下面。

bash 复制代码

# Set storage provider to S3
NUXT_STORAGE_PROVIDER=s3

# S3 basic configuration
NUXT_PROVIDER_S3_ENDPOINT=https://your-s3-endpoint.com
NUXT_PROVIDER_S3_BUCKET=chronoframe-photos
NUXT_PROVIDER_S3_REGION=us-east-1
NUXT_PROVIDER_S3_ACCESS_KEY_ID=your-access-key-id
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=your-secret-access-key

# Optional configuration
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=https://cdn.example.com
NUXT_PROVIDER_S3_FORCE_PATH_STYLE=false

注意点有以下几个：

1、NUXT_PROVIDER_S3_REGION 可以设置为auto（我就是这么设置）

2、ENDPOINT 在空间概览右下角

3、ACCESS_KEY_ID和ACCESS_KEY是个人信息密钥管理

4、如果你对象存储已经绑定域名了，要保证访问就要把cdn_url换成你的域名/BUCKET！！不然只能存不能看

b.png)

part5 关于更新docker或者重启

如果修改.env文件不生效，有两种方式，1、把/app/data/里面文件删掉，2、docker重启，建议先用第二种方式。

bash 复制代码

docker stop chronoframe  #停止
docker rm chronoframe #移除
docker run -d   --name chronoframe   -p 3000:3000   -v $(pwd)/data:/app/data   --env-file .env   ghcr.io/hoshinosuzumi/chronoframe:latest #启动

如果要更新版本：

bash 复制代码

docker pull ghcr.io/hoshinosuzumi/chronoframe:latest

结尾

恭喜，成功了，我也是一步步走过来的。学习到新东西的感觉很美妙。