个人网站搭建过程

by

网站架构

wordpress是一个用于快速搭建博客平台的php软件，运行在apache下

wekan是一个开源看板，类似trello，可用于项目管理和计划安排

搭建步骤

环境准备

1. 安装docker

2. 拉取wordpress、mysql、wekan、mongo的docker镜像

docker pull wordpress
docker pull mysql
docker pull mongo:4.4-rc-focal
docker pull wekanteam/wekan:v5.35
# 作者反馈最新版的镜像有bug，不建议拉取最新的。不过我看他说目前已经修复了。

docker创建网络用于容器间通信

docker network create huntzou_website

启动容器

1. 启动mysql

docker run --name db-mysql --restart=always -v /etc/localtime:/etc/localtime -e MYSQL_ROOT_PASSWORD=<your pwd> -d --network huntzou_website f2ad9

2. 进入到mysql容器中创建数据库

docker exec -it <containerID> bash
mysql -u<your db user> -p
CREATE DATABASE <your db name> DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

3. 启动wordpress

docker run --name wp-web --restart=always -v /etc/localtime:/etc/localtime --network huntzou_website -d -e WORDPRESS_DB_HOST=db-mysql -e WORDPRESS_DB_USER=<your db user> -e WORDPRESS_DB_PASSWORD=<your db pwd> -e WORDPRESS_DB_NAME=<your db name> -e WORDPRESS_TABLE_PREFIX=wp b44d

4. 启动mongodb

docker run -d --restart=always --name db-mongo -v /etc/localtime:/etc/localtime --network huntzou_website 5cea

5. 启动wekan

docker run -d --restart=always --name wekan-web -v /etc/localtime:/etc/localtime -e MONGO_URL="mongodb://db-mongo/wekan" -e ROOT_URL="http://wekan-web:8080" --network huntzou_website 0498

6. 启动nginx

docker run -d --restart=always --name nginx -v /etc/localtime:/etc/localtime --network huntzou_website -p 80:80 -p 8001:8001 -p 8002:8002 8325

其中 -v /etc/localtime:/etc/localtime 是将本机时区挂载到容器中，因为有些容器并不一定和你的服务器时间一样。

或者在容器构建之后使用命令 docker cp /usr/share/zoneinfo/Asia/Shanghai 容器ID:/etc/localtime

修改nginx配置

创建nginx配置文件 my_server_block.conf

server {
    listen 0.0.0.0:80;
    listen 0.0.0.0:8001;
    server_name <your ip or domain>;
    access_log /opt/bitnami/nginx/logs/huntzou_website.log;
    error_log /opt/bitnami/nginx/logs/huntzou_website_error.log;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header HOST $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://wp-web:80/;
        proxy_redirect off;
    }
}
server {
    listen 0.0.0.0:8002;
    server_name <your ip or domain>;
    access_log /opt/bitnami/nginx/logs/huntzou_website.log;
    error_log /opt/bitnami/nginx/logs/huntzou_website_error.log;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header HOST $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://wekan-web:8080/;
        proxy_redirect off;
    }
}

将配置文件上传至nginx容器中

docker cp my_server_block.conf 4a8f:/opt/bitnami/nginx/conf/server_blocks/

重启nginx容器

docker restart 4a8f

添加域名解析

上述步骤均在只使用ip的情况下完成，配置完成后也只能使用ip进行访问。我现在拥有了一个已经备案的域名，并希望该网站都能通过域名来访问

注：WordPress4.90+版本后域名更换排常简单。在后台菜单“设置-常规”，把“WordPress地址（URL）和站点地址（URL）”更换成新域名地址就可以了。文章图片和特色图片都会自动更换成新域名链接。

可以在管理页面左边栏中的 “Tools-Site Health” 中看到wordpress版本

首先进入wordpress后台修改两个地址

修改完成后使用IP就不能登录后台了，原因见另一篇文章：关于wordpress中WordPress Address和Site Address的理解

修改nginx配置并重启nginx：

# 访问一级域名默认跳转到wordpress页面
server {
    listen 80;
    server_name woyou.cool;
    rewrite ^/(.*) https://blog.woyou.cool/$1 permanent;
}
server {
    listen 80;
    server_name kanban.woyou.cool;
    access_log /opt/bitnami/nginx/logs/huntzou_website.log;
    error_log /opt/bitnami/nginx/logs/huntzou_website_error.log;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header HOST $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://wekan-web:8080/;
        proxy_redirect off;
    }
}
server {
    listen 80;
    server_name blog.woyou.cool;
    access_log /opt/bitnami/nginx/logs/huntzou_website.log;
    error_log /opt/bitnami/nginx/logs/huntzou_website_error.log;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header HOST $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://wp-web:80;
        proxy_redirect off;
    }
}

添加SSL证书

详见另一篇文章：Nginx反向代理wordpress开启HTTPS

其他

搭建私有音乐流媒体服务

Navidrome 是一个开源私有音乐流媒体软件，可以使用docker搭建

该播放器不支持页面上传音乐，故需要手动将音乐文件放在指定文件夹下

官网：https://www.navidrome.org/

docker镜像：https://hub.docker.com/r/deluan/navidrome

运行镜像：

docker run --restart=always --name navidrome -d --network huntzou_website -e ND_SCANSCHEDULE=1h -e ND_LOGLEVEL=error -e ND_UIWELCOMEMESSAGE="Welcome to HuntZou's private music lab" -e ND_SEARCHFULLSTRING=true -e ReverseProxyUserHeader=HTTP_X_REAL_IP d4a813d502ce

关于上述中环境变量配置说明见：https://www.navidrome.org/docs/usage/configuration-options/

由于我没有在容器中挂载宿主机磁盘，故若需要上传音乐则需要两步（也可以选择在运行时使用 -v music_folder:/music 进行挂载，则可以省略第2步）

  1. 先将歌曲传输到宿主机服务器上
  2. 再将宿主机上的歌曲复制到docker容器中
    docker ps my_music.mp3 navidrome:/music

其他关于环境的配置同其他服务，在nginx中暴露出一个 music.woyou.cool 域名指向 navidrome:4533 即可通过域名访问

更新

2023/4/24

所有站点更新了ssl证书，重新创建了反向代理的nginx，使得其挂载了本地的网页目录、证书目录、配置文件，便于修改。并使用docker-compose进行创建

docker-compose.yml 文件内容：

networks: 
  huntzou_website: 
   external: true 

services: 
  web:
    image: nginx
    container_name: nginx
    networks:
     - huntzou_website
    restart: unless-stopped
    volumes:
     - /root/nginx/config/nginx.conf:/etc/nginx/nginx.conf:ro
     - /root/nginx/certs:/certs
     - /root/nginx/html:/etc/nginx/html:ro
    ports:
     - "80:80"
     - "443:443"

注1：networks部分是必要的，因为要使用之前已经创建的网络必须提前申明（位置不一定要最上面，但一定要有），其中关键部分就是“external: true”

注2：不能使用 apt install docker-compose 安装的docker-compose，而必须使用官网上的步骤进行安装，否则网络这一块它是识别不出来的

注3：html目录挂载到容器的/etc/nginx/html目录上，这是因为如果你在nginx配置文件的root目录写html目录，默认指定的就是这个位置的html目录

关于证书部分：

申请好证书后，统一放在宿主机的 /root/nginx/certs 目录下，然后使用unzip解压即可

unzip woyou.cool_nginx.zip
# 会在当前目录下生成名为 woyou.cool_nginx 的文件夹，里面就是证书和密钥文件

因为这个目录已经挂载到了nginx容器的/certs目录下，并且在nginx.conf文件中都配置了相对于的路径，解压后就不用管了，nginx.conf 文件的一个server配置为：

events {}  # 这个是必要的，否则会报错
http {
        # nginx首页
        server {
            listen 443 ssl;
            server_name woyou.cool www.woyou.cool;

            ssl_certificate /certs/woyou.cool_nginx/woyou.cool_bundle.crt;
            ssl_certificate_key /certs/woyou.cool_nginx/woyou.cool.key;
            ssl_session_timeout 5m;
            ssl_protocols TLSv1.2 TLSv1.3;
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
            ssl_prefer_server_ciphers on;

            location = / {
                root html;
                index index.html;
            }
            error_page 404 = @blog;
            location @blog {
                rewrite ^/(.*) https://blog.woyou.cool permanent;
            }
        }

        # wordpress
        server {
            listen 443 ssl;
            server_name blog.woyou.cool;
            #access_log /opt/bitnami/nginx/logs/huntzou_website.log;
            #error_log /opt/bitnami/nginx/logs/huntzou_website_error.log;

            #证书文件名称
            ssl_certificate /certs/blog.woyou.cool_nginx/blog.woyou.cool_bundle.crt;
            #私钥文件名称
            ssl_certificate_key /certs/blog.woyou.cool_nginx/blog.woyou.cool.key;
            ssl_session_timeout 5m;
            #请按照以下协议配置
            ssl_protocols TLSv1.2 TLSv1.3;
            #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
            ssl_prefer_server_ciphers on;

            location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header HOST $http_host;
                proxy_set_header X-NginX-Proxy true;
                # 这个一定要配置，告诉wordpress反向代理使用了https，不然会出很多问题
                proxy_set_header X-Forwarded-Proto  https;

                proxy_pass http://wp-web:80;
                #proxy_pass http://frps:8082;
                proxy_redirect off;
            }
        }

        ......
}

关于favicon.ico的制作，可以使用这个网站：https://www.favicon.cc/，生成的favicon.ico文件直接放在上述挂载的html文件夹下即可

Leave a Comment