Wpisy

Opublikowane w

Docker – Wprowadzenie do konteneryzacji (cz. 5)

Persistencja danych z użyciem Bind Mounts (Dev Mode)

W poprzednim wpisie poznaliśmy named volumes, które pozwalają przechowywać dane aplikacji niezależnie od kontenera. Teraz przyjrzymy się innej technice – bind mounts – szczególnie przydatnej podczas pracy deweloperskiej.

Czym są Bind Mounts?

Bind mount to sposób, w jaki możemy podłączyć katalog z naszego hosta (komputera) bezpośrednio do kontenera Dockera. Dzięki temu kontener ma dostęp do bieżących plików źródłowych i reaguje natychmiast na ich zmiany – bez konieczności ponownego budowania obrazu.

1. Przejście do katalogu aplikacji

Otwórz terminal i przejdź do katalogu, w którym znajduje się Twoja aplikacja:

cd /path/to/getting-started/app

2. Uruchomienie kontenera w trybie deweloperskim

Wykonaj polecenie:

docker run -dp 3000:3000 \
-w /app -v "$(pwd):/app" \
node:18-alpine \
sh -c "yarn install && yarn run dev"

Co oznaczają parametry?

  • -w /app – ustawia katalog roboczy kontenera na /app.
  • -v "$(pwd):/app" – tworzy bind mount, który łączy bieżący katalog hosta ($(pwd)) z katalogiem /app w kontenerze.
  • node:18-alpine – lekki obraz Node.js, na którym uruchamiamy aplikację.
  • yarn install && yarn run dev – instalacja zależności i start w trybie developerskim.

3. Podgląd logów kontenera

Aby zobaczyć logi aplikacji w czasie rzeczywistym:

docker logs -f <container-id>

<container-id> uzyskasz poleceniem:

docker ps

4. Wprowadzenie zmian w kodzie

Otwórz plik:

src/static/js/app.js

Na linii 109 zmień:

{Submitting ? 'Adding...' : 'Add item'}

na:

{Submitting ? 'Adding...' : 'Add'}

5. Podgląd zmian w przeglądarce

Dzięki bind mountowi zmiana w kodzie zostanie automatycznie odzwierciedlona w aplikacji – wystarczy odświeżyć stronę w przeglądarce na http://localhost:3000.

Opublikowane w

Docker – Wprowadzenie do konteneryzacji (cz. 4)

Persystencja danych z użyciem named volumes

Do tej pory nasza aplikacja działała w kontenerze, ale miała jedną istotną wadę: po usunięciu kontenera traciliśmy wszystkie dane. To normalne, ponieważ kontener jest tymczasowy – kiedy go zatrzymasz i usuniesz, znika także jego system plików.

Rozwiązaniem tego problemu są wolumeny (volumes) w Dockerze. Dzięki nim możemy przechowywać dane w sposób trwały, niezależnie od cyklu życia kontenera.

1. Tworzenie wolumenu

Na początek stwórzmy wolumen o nazwie todo-db:

docker volume create todo-db

Możesz sprawdzić listę wolumenów poleceniem:

docker volume ls

2. Uruchomienie aplikacji z wolumenem

Teraz uruchomimy naszą aplikację Todo App i zamontujemy wolumen w katalogu /etc/todos:

docker run -dp 3000:3000 -v todo-db:/etc/todos getting-started

➡️ Dzięki temu wszystkie dane aplikacji (np. zadania na liście) będą zapisywane w wolumenie, a nie tylko w kontenerze.

Dodaj teraz kilka nowych zadań do aplikacji Todo – np. przez interfejs w przeglądarce na http://localhost:3000.

3. Usuwanie kontenera

Zatrzymajmy i usuńmy kontener, aby sprawdzić, co stanie się z danymi.

Najpierw sprawdź uruchomione kontenery:

docker ps

Następnie usuń kontener (najpierw zatrzymując go):

docker stop CONTAINER_ID

docker rm CONTAINER_ID

lub jednym poleceniem:

docker rm -f CONTAINER_ID

4. Uruchomienie nowego kontenera z tym samym wolumenem

Teraz uruchommy aplikację ponownie – z tym samym wolumenem:

docker run -dp 3000:3000 -v todo-db:/etc/todos getting-started

Wejdź do aplikacji w przeglądarce. Zauważysz, że Twoje zadania nadal tam są 🎉 – mimo że stary kontener został usunięty.

Opublikowane w

Docker – Wprowadzenie do konteneryzacji (cz. 3)

Publikacja obrazu w Docker Hub i uruchamianie na zewnętrznej instancji

W poprzednich częściach serii nauczyliśmy się:

  • jak stworzyć aplikację i uruchomić ją w kontenerze Dockera,
  • jak aktualizować kod i ponownie budować obraz.

Teraz pójdziemy krok dalej – opublikujemy nasz obraz w Docker Hub, aby można go było uruchomić na dowolnym komputerze lub w chmurze.

1. Tworzenie repozytorium w Docker Hub

  1. Zaloguj się na Docker Hub.
  2. Kliknij Create Repository.
  3. Podaj nazwę (np. getting-started) i ustaw repozytorium jako Public, aby inni mogli je pobrać.

2. Pushowanie obrazu do Docker Hub

a) Próba pushowania

Jeśli spróbujesz:

docker push docker/getting-started

prawdopodobnie zobaczysz błąd:

denied: requested access to the resource is denied

Dlaczego? Bo taki obraz lokalnie nie istnieje pod tą nazwą. Musimy go przygotować.

b) Logowanie do Docker Hub

Najpierw zaloguj się w terminalu:

docker login -u YOUR-USER-NAME

Podaj swoje hasło do Docker Hub.

c) Tagowanie obrazu

Musimy nadać obrazowi właściwą nazwę w formacie:

YOUR-USER-NAME/repository-name

W naszym przypadku:

docker tag getting-started YOUR-USER-NAME/getting-started

Teraz mamy lokalny obraz o nowej nazwie, zgodnej z repozytorium w Docker Hub.

d) Pushowanie obrazu

Wystarczy teraz wykonać:

docker push YOUR-USER-NAME/getting-started

Jeśli wszystko pójdzie dobrze, obraz zostanie przesłany i będzie dostępny w Twoim repozytorium.

3. Uruchamianie obrazu na nowej instancji

Spróbujmy teraz uruchomić naszą aplikację w zewnętrznym środowisku – np. w Play with Docker.

a) Otwórz Play with Docker

Zaloguj się przy użyciu swojego konta Docker Hub.

b) Utwórz instancję

Kliknij +ADD NEW INSTANCE, aby uruchomić nową maszynę z Dockerem.

c) Uruchom aplikację

W terminalu instancji wpisz:

docker run -dp 3000:3000 YOUR-USER-NAME/getting-started

Docker pobierze Twój obraz z Docker Hub i uruchomi aplikację.

d) Otwórz port

Kliknij przycisk Open Port, wpisz 3000 i potwierdź.
Twoja aplikacja powinna się otworzyć w nowej zakładce 🎉

Opublikowane w

Docker – Wprowadzenie do konteneryzacji (cz. 2)

Aktualizacja aplikacji i ponowne uruchomienie kontenera

W poprzednim wpisie pokazaliśmy, jak z prostą aplikacją, zbudować jej obraz przy użyciu Dockera i uruchomić ją w kontenerze. Teraz zajmiemy się tym, co zrobić, gdy zmienimy coś w kodzie źródłowym aplikacji – czyli typowym scenariuszem pracy deweloperskiej.

1. Aktualizacja kodu źródłowego

Załóżmy, że edytujesz plik src/index.js.
Chcesz, żeby po tej zmianie aplikacja zastosowała zmiany – ale aktualnie działający kontener nadal pokazuje starą aplikację.

2. Budowanie nowego obrazu

Po dokonaniu zmian w kodzie musisz zbudować nowy obraz, który zawiera zaktualizowaną wersję aplikacji:

docker build -t getting-started .

To nadpisze poprzedni obraz o nazwie getting-started.

3. Uruchomienie nowej wersji kontenera

Spróbuj uruchomić nowy kontener:

docker run -dp 3000:3000 getting-started

⚠️ Błąd! Prawdopodobnie otrzymasz komunikat, że port 3000 jest już zajęty. To dlatego, że stary kontener nadal działa.

4. Sprawdzenie i usunięcie starego kontenera

a) Sprawdź, które kontenery są uruchomione:

docker ps

Zobaczysz coś takiego:

CONTAINER ID IMAGE ... PORTS NAMES
abc123456789 getting-started ... 0.0.0.0:3000->3000/tcp inspiring_shaw

b) Zatrzymaj i usuń kontener:

Możesz to zrobić na dwa sposoby:

Metoda 1: Ręczne zatrzymanie i usunięcie

docker stop abc123456789

docker rm abc123456789

Metoda 2: Jednym poleceniem

docker rm -f abc123456789

Metoda 3: GUI – Docker Desktop

Jeśli korzystasz z Docker Desktop, możesz wejść do interfejsu graficznego, znaleźć uruchomiony kontener, kliknąć “Stop” i potem “Remove”.

5. Uruchomienie nowej wersji aplikacji

Po usunięciu starego kontenera uruchom aplikację ponownie:

docker run -dp 3000:3000 getting-started

Wejdź na http://localhost:3000 i zobacz nowy komunikat 🎉

Opublikowane w

Docker – Wprowadzenie do konteneryzacji

W dzisiejszym świecie tworzenia aplikacji coraz częściej spotykamy się z pojęciem konteneryzacji. Dzięki niej możemy łatwo pakować aplikacje wraz z całym środowiskiem uruchomieniowym, co upraszcza wdrażanie i eliminuje problem „u mnie działa”. Najpopularniejszym narzędziem do konteneryzacji jest Docker.

W tym wpisie pokażę Ci, jak można  w obrazie kontenerowym zbudować aplikację i uruchomić ją lokalnie.

I. Tworzenie aplikacji w kontenerze

1. Stworzenie aplikacji

Na początek potrzebujemy aplikacji. Będzie to aplikacja napisana w Node.js. i jest to przykładowa lista rzeczy do zrobienia:

TODO List AplikacjaPobierz

Przykład zaciągnięty z: https://www.docker.com/101-tutorial/

2. Budowanie obrazu aplikacji

Aby uruchomić aplikację w kontenerze, musimy stworzyć Dockerfile – plik, który opisuje, jak zbudować obraz naszej aplikacji.

a) Tworzenie pliku Dockerfile

Utwórz plik Dockerfile w katalogu głównym projektu i dodaj do niego następującą treść:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "src/index.js"]

Opis poszczególnych poleceń:

  • FROM node:18-alpine – bazujemy na oficjalnym obrazie Node.js.

  • WORKDIR /app – ustawiamy katalog roboczy.

  • COPY . . – kopiujemy wszystkie pliki do kontenera.

  • RUN yarn install --production – instalujemy zależności.

  • CMD ["node", "src/index.js"] – komenda uruchamiająca aplikację.

b) Budowanie obrazu

Otwórz terminal w katalogu z projektem i uruchom:

docker build -t getting-started .

 

To polecenie zbuduje obraz kontenerowy i nazwie go getting-started.

3. Start kontenera aplikacji

Gdy obraz jest już gotowy, możemy uruchomić kontener:

docker run -dp 3000:3000 getting-started

 

  • -d – uruchamia kontener w tle (detached mode),

  • -p 3000:3000 – mapuje port lokalny 3000 na port 3000 w kontenerze.

Teraz wystarczy wejść w przeglądarkę i otworzyć:

http://localhost:3000

Powinieneś zobaczyć pustą listę rzeczy do zrobienia.  🎉

 

Opublikowane w

Szara Piechota – Odtwarzacz z Synchronizowanym Tekstem

Szara Piechota – Interaktywny Odtwarzacz Patriotycznej Pieśni

Cześć wszystkim! Chciałbym podzielić się z Wami moim najnowszym projektem – interaktywnym odtwarzaczem pieśni “Szara Piechota” z synchronizowanym tekstem.

🎵 O czym to jest?

Stworzyłem aplikację webową, która odtwarza patriotyczną pieśń “Szara Piechota” z tekstem pojawiającym się dokładnie w momencie, gdy jest śpiewany. To połączenie tradycji z nowoczesną technologią webową.

�� Live Demo

Możecie przetestować aplikację tutaj: https://szara-piechota-song.web.app/

✨ Funkcje

  • Synchronizacja tekstu – każda linia pojawia się w odpowiednim momencie muzyki
  • Patriotyczny design – kolory narodowe Polski (czerwony i biały)
  • Responsywność – działa na wszystkich urządzeniach
  • Intuicyjne sterowanie – play/pause, regulacja głośności, przewijanie

🛠️ Technologie

Projekt został zbudowany przy użyciu:

  • HTML5 – struktura strony
  • CSS3 – patriotyczny design z gradientami
  • JavaScript (ES6+) – synchronizacja tekstu z muzyką
  • Web Audio API – odtwarzanie audio
  • Firebase Hosting – wdrożenie aplikacji

🎯 Cel projektu

Chciałem stworzyć coś, co łączy polską tradycję wojskową z nowoczesną technologią. “Szara Piechota” to jedna z najważniejszych pieśni patriotycznych, a dzięki synchronizacji tekstu można lepiej zrozumieć i przeżyć jej treść.

📱 Jak używać

  1. Wejdź na stronę
  2. Kliknij przycisk “ODTWÓRZ”
  3. Ciesz się synchronizowanym tekstem!

🔗 Kod źródłowy

Projekt jest open-source i dostępny na GitHub. Możecie go znaleźć w moim repozytorium:

https://github.com/traininguniverse/szara-piechota

Opublikowane w

Kici World: Interaktywna strona dla miłośników kotów

Kici World – Magiczny świat kotów Rudego i Szarka.

Jesteś miłośnikiem kotów? Szukasz miejsca, gdzie znajdziesz nie tylko piękne zdjęcia, ale także inspirujące historie, praktyczne porady i ciekawostki ze świata kotów? Poznaj Kici World – wyjątkową, interaktywną stronę internetową poświęconą dwóm niezwykłym kotom: Rudemu i Szarkowi!

Na stronie Kici World czeka na Ciebie:

  • Galeria zdjęć – zobacz najpiękniejsze ujęcia Rudego i Szarka w różnych sytuacjach. Przeglądaj zdjęcia w wygodnym sliderze i poznaj ich codzienne życie.
  • Historie kotów – zanurz się w bajkowych opowieściach o przygodach naszych bohaterów. Każda historia to dawka uśmiechu i kociej magii!
  • Porady opieki – dowiedz się, jak najlepiej dbać o małe kocięta. Praktyczne wskazówki pomogą zarówno początkującym, jak i doświadczonym opiekunom.
  • Kocie ciekawostki – poznaj interesujące fakty i zabawne anegdoty ze świata kotów. Czy wiesz, że kocie mruczenie może działać leczniczo?

Strona została stworzona z myślą o wszystkich, którzy kochają koty i chcą dzielić się tą pasją z innymi. Przyjazny interfejs, kolorowa szata graficzna i mnóstwo kociej energii sprawiają, że Kici World to miejsce, do którego chce się wracać!

Zajrzyj na stronę: https://kici-world.web.app/

Kod do repozytorium strony/apki: https://github.com/traininguniverse/cat-world

Teraz też możesz zagrać w interaktywną grę z Kiciusiem – baw się, oglądaj animacje i przeżyj kocie przygody online!

 

Opublikowane w

Sklonowanie większego dysku na mniejszy – Clonezilla

      W największej możliwej ilości przypadków możliwa jest sytuacja, że kupiłeś/aś prawdopodobnie laptop z 1TB dyskiem magnetycznym.
Dobrym rozwiązaniem jest przenieść dane z dysku HDD (magnetycznego) na SSD (dysk flashowy), ponieważ jest on około 10-krotnie szybszy.
Większość dysków w laptopach ma rozmiar 2,5”. Chyba, że posiada się jeszcze szybszy typ NVMe (uwaga! tu opisany w poście program może mieć problem z jego wykryciem z powodu sterowników, i tu trzeba kombinować).

Dysk 2,5” SSD o pojemności 256GB można na chwilę obecną dostać za sumę około 70zł lub 512GB za około 110zł – a różnica w działaniu za te pieniądze jest kolosalna. A dokładniej odczyt/zapis informacji na dysku jest zoptymalizowany parokrotnie.
Laptop ciszej pracuje i uszkodzenie dysku SSD w trakcie spoczynku i pracy jest dużo trudniejsze.

Teraz opiszę przykładowe kroki/etapy działania:

  1. Pierwsza rzecz.
    Kupujemy 2,5” dysk SSD na złączu SATA. Od I do III modele są kompatybilne wstecz. Więc, jeżeli, np. w laptopie mamy Satę I i kupimy dysk na złączu III, to nie będzie żadnego problemu z działaniem.
  2. Po drugie – musimy mieć jakiś pendrive, aby utworzyć, np. przy pomocy Rufus-a bootowalny dysk z Clonezilla. Wyszukujemy obraz iso tego unix-owego systemu i montujemy na posiadanym pendrivie.

Mamy już nowy dysk i bootowalny dysk z Clonezillą (jest to w pełni darmowy program do klonowania partycji/dysków).
I teraz: albo mamy miejsce na drugi 2,5” dysk w laptopie albo musimy posiadać adapter na złącze USB lub inne by podłączyć nowy dysk do naszego komputera.

3. Najpierw powinniśmy podłączyć sam nasz nowy dysk i utworzyć tablicę partycji -> partycję (np. ms-dos/ lub fat32) na SSD, gdyż Clonezilla tego nie zrobi. Możemy do tego użyć unixowego programu GParted lub jakiegoś darmowego windowsowego programu do partycjonowania dysków.

4. Odpalamy Clonezillę.

Wybieramy opcję nam odpowiadającą typu, np. dysk->to->image.

I jeszcze jedna bardzo ważna kwestia: partycje z danymi powinny mieścić się w rozmiarze nowego dysku ( z większym Clonezilla sobie nie poradzi).

Czyli w tym celu używamy znowu jakiegoś programu do partycjonowania i zmieniamy obrazy partycji systemów, tak by nam odpowiadały. Pamiętajmy, jednak, by nie ruszać partycji EFI, bootowalnych, itp.
Dane z rozmiarami wszystkich partycji muszą mieścić się w zakresie pojemności nowego dysku.

5. Tworzymy obraz dysku.

6. Następnie odtwarzamy obraz dysku HDD na naszym nowym dysku SSD.

Alternatywnie można użyć, jak ktoś woli GUI, czyli z graficznym interfejsem użytkownika – program Rescuezilla.

Ważna wskazówka:
Wszystkie partycje powinny być umieszczone jak na stosie od lewej do prawej i mieścić się w rozmiarze nowego dysku.

Opublikowane w

UBUNTU 24 – skrót w menu do pliku AppImage

  1. Najpierw tworzymy skrypt start_app.sh:
#!/bin/bash

# Ustaw lokalizację pliku App.AppImage
APPIMAGE_PATH="$HOME/Apps/App.AppImage"

# Sprawdź, czy plik istnieje
if [[ ! -f "$APPIMAGE_PATH" ]]; then
  echo "Plik App .AppImage nie został znaleziony w lokalizacji: $APPIMAGE_PATH"
  echo "Upewnij się, że podałeś poprawną ścieżkę w zmiennej APPIMAGE_PATH."
  exit 1
fi

# Nadaj uprawnienia wykonywalne, jeśli nie są ustawione
if [[ ! -x "$APPIMAGE_PATH" ]]; then
  echo "Nadawanie uprawnień wykonywalnych dla pliku .AppImage..."
  chmod +x "$APPIMAGE_PATH"
fi

# Uruchom aplikację z obsługą flagi --no-sandbox
echo "Uruchamianie App ..."
"$APPIMAGE_PATH" --no-sandbox

# Sprawdź, czy aplikacja zakończyła się błędem
if [[ $? -ne 0 ]]; then
  echo "Wystąpił problem z uruchomieniem App. Sprawdź komunikaty błędów powyżej."
  exit 2
fi

echo "App został uruchomiony pomyślnie!"
exit 0

2. Edytorem nano tworzymy/edytujemy plik do skrótu uruchamialnego:

nano ~/.local/share/applications/app-launcher.desktop


3. W pliku app-launcher.desktop dodajemy następującą zawartość:

[Desktop Entry]
Version=1.0
Name=App
Comment=Uruchamia aplikację App
Exec=/pełna/ścieżka/do/skryptu/start_app.sh
Icon=utilities-terminal
Terminal=true
Type=Application
Categories=Utility;

4. Zmieniamy uprawnienia do pliku na wykonywalne:

chmod +x ~/.local/share/applications/app-launcher.desktop


5. Aktualizujemy bazę aplikacji:

update-desktop-database ~/.local/share/applications


Skrót powinien być już dostępny.

Opublikowane w

Problem z dodatkowym dyskiem NTFS pod Linux-em

Możliwe, że podczas pracy komputera system operacyjny Ubuntu (v22 lub inny) się zawiesi (np. w związku z ograniczeniem RAM i swap-u). Po ponownym uruchomieniu komputera z systemem może wystąpić wtedy problem z zamontowaniem tego dysku.

Rozwiązaniem może być przeskanowanie w celu naprawy błędów plików:

sudo ntfsfix /dev/sdb1

,gdzie /dev/sdb1 to lokalizacja dodatkowego dysku

Można go również odmontować:

sudo umount /dev/sdb

Jak i zamontować od nowa:

sudo mount /dev/sdb/ /mnt/drive

,gdzie /mnt/drive to miejsce katalogu, w którym montujemy dysk

Teraz nie powinno być problemów z widocznością dysku.