Как создать контейнер Docker приложения AngularJS?

У меня есть приложение AngularJS, которое имеет такую структуру:

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

Как мне создать свой собственный образ из этого и запустить его в контейнере? Я попытался запустить его безуспешно с Dockerfile, и я относительно новичок в Docker, поэтому извиняюсь, если это просто. Я просто хочу запустить его на http-сервере (возможно, используя nginx?)

Я пробовал это для помощи, но безуспешно

Ответ 1

Прежде всего, следуйте этому руководству по лучшей практике, чтобы создать свою структуру приложений angular. Index.html следует поместить в корневую папку. Я не уверен, что будут выполняться следующие шаги, если это не так.

Чтобы использовать nginx, вы можете следовать этому небольшому учебнику: Доклерное приложение angular с nginx

1.Создайте файл Docker в корневой папке вашего приложения (рядом с вашим index.html)

FROM nginx
COPY ./ /usr/share/nginx/html
EXPOSE 80

2.Run docker build -t my-angular-app . в папке вашего файла Docker.

3. docker run -p 80:80 -d my-angular-app, а затем вы можете получить доступ к своему приложению http://localhost

Ответ 2

Опираясь на ответ @adebasi, я хочу выделить этот Dockerfile для использования с текущим приложением Angular CLI.

Он использует многоступенчатую функцию сборки Dockers, представленную в 17.05. На шаге 1 контейнер Node используется только для создания сборки. Окончательное изображение будет использовать Nginx и статически доставлять встроенные файлы.

### STAGE 1: Build ###    
# We label our stage as 'builder'
FROM node:8-alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

## Storing node modules on a separate layer will prevent 
## unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder 
## to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

Ответ 3

Вообще,

Docker используется для закрепления приложений. Теперь приложение просто не состоит только из JavaScript (поскольку AngularJS является JS-каркасом), если вы не выбираете инфраструктуру back end, такую как Node, ASP.NET Core, Python и т.д. Поэтому, если у вас есть простое приложение HTML, используйте обратный -proxy или контейнер веб-сервера, упомянутый Робби. Для простого случая (пример Nginx):

Загрузите Nginx Изображение Docker из концентратора.
Использовать тома или создать собственное изображение для хранения ваших конфигураций.
Экспортировать порт из контейнера в хост.