Constructing Image Repository Switching Site Images to Self-built Services

Edited on In Views: Reading time ≈ 10 mins.

Home broadband environment: Practical process sharing of setting up Lankong Image Repository

Purpose/Usage

For personal use, self-hosted image repositories are currently adequate.

Visit: Carl Notes Image Repository

Login to the backend to manage image content in the image repository

Related Content

Implementation Method

Docker Deployment of Lsky Pro Image Repository Application

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
docker pull dko0/lsky-pro

docker run  --name lsky-pro --restart always -p 8091:80 -d -v /volume2/KingchuxingSSD512G/MacBookPro_Skitch:/var/www/html dko0/lsky-pro

# Convert to docker-compose
version: '3.9'
services:
    lsky-pro:
        image: dko0/lsky-pro
        volumes:
            - '/volume2/KingchuxingSSD512G/MacBookPro_Skitch:/var/www/html'
        ports:
            - '8091:80'
        restart: always
        container_name: lsky-pro

Configuring PicGO

Download and install PicGo, Mac OS X: [PicGo-2.4.0-beta.6-x64.dmg](https://github.com/Molunerfinn/PicGo/releases
https://picgo-release.molunerfinn.com/2.4.0-beta.6/PicGo-2.4.0-beta.6-x64.dmg)

Open the main interface/window, plugin settings, search and install the plugin named: lankong (version downloaded: lankong 1.1.3)

Image Settings 》 lankong

1
2
3
Lsky Pro Version： V2
Server: https://img.carlzeng.com:3
Auth token: Bearer 1|ZRZcNz1E6hAuyV4LytmCqmGx5yST0g9OyhdptXXX

The preferred method to obtain the Auth Token for Lsky Pro Lankong Image Repository, recommended (run the command in Terminal):

1
2
3
curl --location --request POST 'https://imgserver.com:3/api/v1/tokens' \
	--form 'email="email@email.com"' \
	--form 'password="password"'

Please modify the URL to match the URL of your self-hosted Lankong Image Repository, and use your login username and password for email and password.

This section is based on: https://github.com/hellodk34/picgo-plugin-lankong

Test: Drag a file here or click to upload, then check the backend of Lankong Image Repository to confirm that the image has been uploaded to the system

Configuring Typora

Settings 》 Preferences

  1. Switch Typora to Chinese language version (as only the Chinese version currently has the PicGo option)

  2. Preferences 》 Images 》 Upload Service Settings. Choose: PicGo.app

  3. Then click on: Verify Image Upload Option

    My settings failed the first time, so I checked the logs as instructed:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ------Error Stack Begin------
    Error: You must be logged in to use.
        at Object.We [as handle] (/Applications/PicGo.app/Contents/Resources/app.asar/node_modules/picgo/dist/index.cjs.js:1:21399)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)
        at async je.doUpload (/Applications/PicGo.app/Contents/Resources/app.asar/node_modules/picgo/dist/index.cjs.js:1:19834)
        at async je.start (/Applications/PicGo.app/Contents/Resources/app.asar/node_modules/picgo/dist/index.cjs.js:1:18605)
        at async $t.upload (/Applications/PicGo.app/Contents/Resources/app.asar/node_modules/picgo/dist/index.cjs.js:1:74902)
        at async Object.upload (/Applications/PicGo.app/Contents/Resources/app.asar/index.js:2:686906)
        at async hr (/Applications/PicGo.app/Contents/Resources/app.asar/index.js:2:689655)
        at async /Applications/PicGo.app/Contents/Resources/app.asar/index.js:2:690736
    -------Error Stack End------- 
    2024-02-21 13:37:13 [PicGo INFO] [PicGo Server] upload result  
    2024-02-21 13:37:13 [PicGo WARN] [PicGo Server] upload failed, see picgo.log for more detail ↑

  4. Copy an image to the clipboard, paste it into the content of an article, right-click on the image, and upload it

  5. PicGo will display the image to be uploaded and the upload progress until the image is automatically uploaded to the image repository

  6. Completion of the entire process

You can refer to: Upload Images

Associating with Alist’s Directory

This is an extension made based on personal usage to share all images from the image repository

Modify docker-compose.yml, add mapping:

  • /volume2/KingchuxingSSD512G/MacBookPro_Skitch:/home/share10

docker exec -it alist /bin/bash

1
mkdir share7 && mkdir share8 && mkdir share9 && mkdir share10 && mkdir share11 && mkdir share12

Restart docker-compose

1
2
3
4
5
# This will not be successful, need to use docker-compose down and up
docker-compose restart

docker-compose down
docker-compose up -d

Enter Alist’s backend management, add “Local Storage”

Map /home/share10 to the external directory: /Image Repository\MacBookPro_Skitch

Result similar to: https://file.carlzeng.com:3/%E5%9B%BE%E5%BA%8AMacBookPro_Skitch/storage/app/uploads/2024/02/21

NPM Reverse Proxy Access with Port

  1. Modify /config/app.php (around lines 57-60, modify the following 2 lines):
1
2
3
4
5
6
7
8
9
10
//Original:
  'url' => env('APP_URL', 'http://localhost'),

//New:
  'url' => env('APP_URL', 'https://xxxxx.com:4443'),
//Original:
  'asset_url' => env('ASSET_URL', null),

//New:
  'asset_url' => env('ASSET_URL', 'https://xxxxx.com:4443'),

Modify https://xxxxx.com:4443 to your own domain name and port according to your situation.

  1. Add a line below line 32 in /app/Providers/ApServiceProvider.php:
1
\Illuminate\Support\Facades\URL::forceScheme('https');

Inspiration Sources

Developed a PicGo image upload plugin for Lankong Image Repository Lsky Pro picgo-plugin-lankong

Failed to load static resources #317

HTTPS+Domain+Port Access Issue, NginxProxyManager Reverse Proxy #607

Raspberry Pi Deploying Lankong Image Repository through Docker