如何解决如何在 docker 容器上运行单个 spa 应用程序
任何人都可以帮助我们如何部署有角度的 spa 应用程序。我们正在使用 dockerfile 进行部署。当我对它进行 dockerize 时,该应用程序已成功构建和部署,但是当我尝试点击 main.js url 时出现以下错误
Access to script at 'http://localhost:8080/main-es5.js' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
VM214154 system.min.js:4 GET http://localhost:8080/main-es5.js net::ERR_Failed
VM214152 zone.js:209 Uncaught Error: Error loading http://localhost:8080/main-es5.js
at HTMLScriptElement.<anonymous> (VM211627 system.min.js:4)
at ZoneDelegate.invokeTask (VM211625 zone.js:434)
at Zone.runTask (VM211625 zone.js:205)
at ZoneTask.invokeTask [as invoke] (VM211625 zone.js:516)
at invokeTask (VM211625 zone.js:1656)
at HTMLScriptElement.globalZoneAwareCallback (VM211625 zone.js:1682)
我的根配置的 index.html
<script type="systemjs-importmap">
{
"imports": {
"app1": "http://localhost:8080/main-es5.js","app2": "http://localhost:4202/main.js","login": "http://localhost:4204/main.js","nav-bar": "http://localhost:4300/main.js","sldb-app": "http://localhost:4205/main.js","single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js","single-spa-layout": "https://unpkg.com/single-spa-layout@1.0.0-beta.2/dist/system/single-spa-layout.min.js"
}
}
</script>
package.json
{
"name": "app1","version": "0.0.0","scripts": {
"ng": "ng","start": "npm run serve:single-spa","build": "npm run build:single-spa","test": "ng test","lint": "ng lint","e2e": "ng e2e","build:single-spa": "ng build --prod --deploy-url /dist/app1 --output-hashing none","serve:single-spa": "ng serve --disable-host-check --port 4201 --deploy-url http://localhost:4201/ --live-reload false"
}
Dockerfile:
# ----- BUILD -----
# Base image used for build node js apps
FROM node:12.2.0-alpine AS build
# Set our working directory
workdir /app
# copy package manifest (we do this in order to cache dependencies)
copY ./package.json .
# Install dependencies
RUN npm i
RUN npm install -g @angular/cli@8.3.26
# copy our application files
copY . .
# Build a static version of our angular app
RUN ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path
# ----- SERVE -----
# We'll use an Nginx base to host our built static assets
FROM Nginx
# copy our minimal custom configuration
#copY Nginx.conf /etc/Nginx/Nginx.conf
# copy our static assets from our build container
copY --from=build /app/dist/app1 /usr/share/Nginx/html
# support running as arbitrary user which belogs to the root group
RUN chmod g+rwx /var/cache/Nginx /var/run /var/log/Nginx
# 80 is a priviliged port
# users are not allowed to listen on priviliged ports
RUN sed -i.bak 's/listen\(.*\)80;/listen 8080;/' /etc/Nginx/conf.d/default.conf
EXPOSE 8080
# remove the user directive
# comment user directive as master process is run as user in OpenShift anyhow
RUN sed -i.bak 's/^user/#user/' /etc/Nginx/Nginx.conf
#EXPOSE 8081
CMD ["Nginx","-g","daemon off;"]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。