主頁(yè) > 知識(shí)庫(kù) > 使用Docker部署Angular項(xiàng)目的方法步驟

使用Docker部署Angular項(xiàng)目的方法步驟

熱門(mén)標(biāo)簽:檢查注冊(cè)表項(xiàng) 網(wǎng)站建設(shè) 美圖手機(jī) 智能手機(jī) 阿里云 使用U盤(pán)裝系統(tǒng) 硅谷的囚徒呼叫中心 百度競(jìng)價(jià)點(diǎn)擊價(jià)格的計(jì)算公式

Docker 部署 Angular 項(xiàng)目有兩種方法,一種是服務(wù)端渲染,這個(gè)官方文檔已有說(shuō)明,另一種就是使用 node 鏡像編譯后放入 web 服務(wù)器。由于在 node 環(huán)境,所以使用 express 最為便捷了。

創(chuàng)建 server.js

const express = require('express');

const app = express();
const config = {
  root: __dirname + '/dist',
  port: process.env.PORT || 4200
};

//靜態(tài)資源
app.use('/', express.static(config.root));

//所有路由都轉(zhuǎn)到index.html
app.all('*', function (req, res) {
  res.sendfile(config.root + '/index.html');
});
app.listen(config.port, () => {
  console.log("running……");
})

創(chuàng)建 Dockerfile

FROM node:13.3.0-alpine3.10

ENV PORT=4200 \

  NODE_ENV=production

# 安裝express和angular/cli
RUN npm install express@4.17.1 -g \

  && npm install -g @angular/cli
# 創(chuàng)建app目錄
RUN mkdir -p /app
# 復(fù)制代碼到 App 目錄
COPY . /app
WORKDIR /app

# 安裝依賴,構(gòu)建程序,這里由于我需要反向代理到子目錄,所以添加了base-href參數(shù)
RUN npm install && ng build --base-href /manage/ --prod

EXPOSE ${PORT}

ENTRYPOINT ["node", "/app/server.js"]

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:賀州 煙臺(tái) 黃山 湘潭 通遼 湖北 山南 懷化

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用Docker部署Angular項(xiàng)目的方法步驟》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266