Фронтенд-развертывание — на основе nginx и докера

Docker
Фронтенд-развертывание — на основе nginx и докера

Развертывание --- первый шаг перед новичком

Прежде всего, я перечислю среду, которая мне нужна для развертывания, все будет в порядке, если вы готовы.

  • Ubuntu 18.04 64 Wei
  • Docker version 19.03.13
  • node v14.15.1

Как только среда будет готова, вы можете начать развертывание

docker pull nginx

Перетащите образ nginx в локальный репозиторий

docker images

Список зеркал на локальном хосте

На данный момент базовая среда в основном готова.Наша следующая задача — упаковать простой html-файл в образ докера.

  • Создать папкуmkdir DockerTest
  • Создайте два файла в папкеvim index.html \ vim DockerFileОбъясните содержимое этих двух файлов. HTML-файл, записанный на вашу статическую веб-страницу, файл Dockerfile — это команда упаковки докера.

Напишите следующий код в Dockerfile index.html, просто напишите его сами

FROM nginx

COPY ./index.html /usr/share/nginx/html/index.html

EXPOSE 80

Кратко объясните смысл этого файла

  • FROM nginx: В зависимости от того, какое зеркало

  • COPY ./index.html /usr/share/nginx/html/index.html: поместить хост в./index.htmlфайл копируется в контейнер/usr/share/nginx/html/index.htmlЕсли у вас есть проблемы с этим, вы можете взглянуть на базовую конфигурацию nginx.

  • EXPOSE 80: Контейнер открывает порт 80 для внешнего мира.

Чтобы завершить этот шаг, посмотрите на структуру каталогов.

образ пакета

в этом каталоге

docker image build ./ -t docker-test:1.0.0Запустите скрипт Docker, чтобы упаковать файл в образ.Имя образа должно быть в нижнем регистре.

Введите после выполнения командыdocker imagesПроверьте, сгенерирован ли файл изображения

Увидев, что образ упакован, вы можете создать контейнер на его основе.

docker container create -p 3000:80 docker-test:1.0.0

docker container start xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Введите, когда закончитеdocker ps

Вы видите, что контейнер на основе образа docker-test уже запущен на порту 3000. Далее введите свой публичный IP-адрес: 3000 для просмотра

Если вы не можете его открыть, проверьте, включен ли брандмауэр сервера, и если вы используете облачный сервер, вам необходимо настроить правила группы безопасности, чтобы дать доступ к порту 3000, потому что у облачного сервера нет доступ к этому порту по умолчанию. После выполнения этих действий контент обязательно будет отображаться!

Поздравляю, успех не за горами! Одна статическая страница совершенно бессмысленна, мы должны разместить на ней наш фронтенд-проект и взаимодействовать с бэкендом, чтобы завершить базовый процесс.

Развертывание на основе antd pro

  • Сначала подготовьте свой фронтенд проект, я возьму скаффолд antd pro для записи
  • Соберите проект и загрузите его на github, а затем потяните вниз.
  • воплощать в жизньnpm run buildУпакуйте проект, umi3 упаковывается в корневую директорию в папку dist (на сервере должна быть установлена ​​старшая версия узла, а для управления версиями узла рекомендуется использовать nvm)

После завершения упаковки войдите в корневую директорию и создайте новый файл Dockerfile для записи в него.

FROM nginx:latest //镜像
MAINTAINER lavie //作者名字写你自己的就好了
COPY default.conf /etc/nginx/conf.d/default.conf  //引入nginx的配置文件👇代码
COPY dist/ /usr/share/nginx/html/

Затем создайте новый файл default.conf в корневом каталоге следующим образом.

server {
    listen 80;

    root /usr/share/nginx/html;
    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api.test/ {              
        proxy_pass xxxxxxxxxxx; #后端地址写写你们后端的就行了
        proxy_set_header Host $host;
    }
   
} #比如你在umi-request里面写/api.test/study/major/list
  #那么上面这几个语句就会帮你转到proxy_pass/study/major/list

Файл ок пишется, он на самом деле такой же как статический файл выше? Давайте запакуем его и посмотрим эффект

Процесс упаковки точно такой же, как указано выше, я сразу загружу изображение

Вы видите, что контейнер работает на порту 3001, откройте его и посмотрите

Хорошо, нет проблем, посмотрите на интерфейс

Это должно капать

Вроде самые основные операции по развёртыванию докера и nginx на фронтенде завершены.Хаха,не правда ли это очень просто?Ведь инженерия,запуск проекта это конечно самый важный этап.Буду дальше делать дальше docker и nginx в будущем обновлено!

                                     

Категории