How to upload image in the CI/CD process?

Question

In my project, image resources are hosted in a common directory /resources/image. If I want to insert an image on a page, I will write the path as follows:

<img src="/resources/image/a.png">

There will be a problem in this way. The image resources need to be put into the final packaged product. Up to now, the resources directory has reached 70 M, which seriously increases the package size. So, now I want to put all the pictures in the CDN.

The method that comes to mind is: local development still refers to the resources in the resources/image, but when publishing to the online, use the webpack to replace the publicPath, and the value of the publicPath is the prefix of the CDN. In this way, the package size will be much smaller.

// before
<img src="/resources/image/a.png">

// after
<img src="https://some.cdn.com/resources/image/a.png">

But there is a problem with this: Every time add files, I have to manually upload them to the CDN, which is more troublesome.

I am currently using Gitlab and also has an interface for uploading images. Is there a way to add files locally, and upload the changed images to CDN automatically in the CI/CD process when submitting the code to the remote?

Answer 1

You can use Git LFS (Large File Storage) solution to add large/binary files to your repository. see git-lfs how to install and add files.

Also, if you use github actions you need to set lfs: 'true' in the checkout step.

- name: Check out repository
    uses: actions/checkout@v2
    with:
      lfs: 'true'