如何使用docker容器以HTML5模式部署angular2应用程序

如何使用docker容器部署angular2应用程序

目前我正在使用Node js和express来提供我的应用程序内容

index.js

 // set server port. SERVER_PORT varibale will come from Dockerfile
var port = process.env.SERVER_PORT;
if (!port) {
    port = 3000;
}
// set internal communication url
global.internalURL = "http://localhost:" + port;

var path = require('path');
var express = require('express');
var app = express();
var bodyParser = require("body-parser");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(function(req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,access_token');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

var router = express.Router(express);
app.use("/testapp", router);

router.use(express.static(path.join(__dirname, 'dist')));

// Catch all other routes and return the index file
router.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

var server = app.listen(port, function() {
    console.log("server on " + port);
});

我的基本URL

<base href="/testapp/">

建筑

ng构建

docker构建-t testapp:v1

---

这种方法非常有效。但我想知道，有没有更好的方法可以在HTML5模式下运行Angular 2应用程序？

在docker映像中构建Angular应用程序非常简单，只要您知道如何：

构建应用程序

ng构建--prod

添加

.htaccess

文件

将

dist

复制到

httpd

图像

利润

使用此方法将从代码中删除express逻辑，这意味着您将不得不管理更少的代码并专注于应用程序本身

示例

Dockerfile

：

FROM httpd:2.4

COPY ./dist /usr/local/apache2/htdocs

COPY ./.htaccess /usr/local/apache2/htdocs

.htaccess

应用程序根目录下需要的文件：

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

选项索引跟随符号链接
重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/index.html[L]

如果需要的话，可以随时查看项目的更多细节

编辑：

我链接到您的Dockerfile是在CI进程中生成的，在该进程中，应用程序生成已经完成。当然，您必须在构建映像之前构建应用程序

---

我这样做是因为这样，原始的typescript代码和css不在网络上提供，因此无法从网站本身访问它们。

它是否支持HTML5模式？我不知道HTML5规范，但我认为它不应该与HTML5模式一起工作。对不起，我以前没有把这个问题说清楚。现在我编辑了这个问题。@vimalprakash您是否有任何关于您需要满足的标准的文档参考？您好@Supamiu，请按angular 2:，在搜索“附录：位置策略和浏览器URL样式”时查看此文档。我希望有一个PathLocationStrategy

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>