>source

지원해 주셔서 감사합니다.

npm과 bower를 사용하는 AngularJS 웹 앱 빌드가 있으며 웹 앱을 빌드하는 몇 가지 gulp 스크립트가 있습니다.

이것은package.json스크립트 속성입니다.

"scripts": {
    "serve": "gulp build & gulp serve:dev",
    "serve:build": "gulp serve:build",
    "build": "gulp build --mode=local"
  },

또한package.json기본 태그가 "gulpfile.js"를 가리 킵니다

"main": "gulpfile.js"

my gulpfile.js는 다음과 같습니다.

var gulp = require('gulp')
var rename = require('gulp-rename');
var template = require('gulp-template');
var argv = require('yargs').argv;
gulp.task('build', function(done) {
    mode = argv.mode || 'local';
    configs = require('./panel/client/js/configs/' + mode);
    return gulp.src(['./panel/client/js/configs/index.js'])
      .pipe(template(configs))
      .pipe(rename({basename: 'config'}))
      .pipe(gulp.dest('./panel/client/js/'));
});

require('./gulp.bootstrap');

내 gulp.config.js

module.exports = function() {
  var client = './panel/client/';
  var root = './';
  var clientApp = client;
  var server = './node_modules/http-server/bin/';
  var temp = './.tmp/';
  var config = {
    temp: temp,
    alljs: [
      './panel/**/*.js',
      './*.js'
    ],
    browserReloadDelay: 1000,
    build: './build/',
    client: client,
    css: [
      temp + 'styles.css'
    ],
    fonts: [
      './bower_components/font-awesome/fonts/*.*',
      './bower_components/bootstrap/dist/fonts/*.*',
      './bower_components/simple-line-icons/fonts/*.*'
    ],
    html: '**/*.html',
    htmltemplates: clientApp + '**/*.html',
    images: [
      client + 'images/**/*.*'
    ],
    index: client + 'index.html',
    js: [
      clientApp + '**/*.module.js',
      clientApp + '**/*.js',
      '!' + clientApp + '**/*.spec.js'
    ],
    less: [
      client + '/styles/styles.less'
    ],
    optimized: {
      app: 'app.js',
      lib: 'lib.js'
    },
    root: root,
    server: server,
    bower: {
      json: require('./bower.json'),
      directory: './bower_components',
      ignorePath: '../..'
    },
    packages: [
      './package.json',
      './bower.json',
    ],
    templateCache: {
      file: 'templates.js',
      options: {
        module: 'core',
        standAlone: false,
        root: 'app/'
      }
    },
    defaultPort: 7203,
    nodeServer: './node_modules/http-server/bin/http-server',
  };
  config.getWiredepDefaultOptions = function() {
    var options = {
      bowerJson: config.bower.json,
      directory: config.bower.directory,
      ignorePath: config.bower.ignorePath
    };
    return options;
  };
  return config;
};

내 gulp.bootstrap

var gulp = require('gulp'),
  args = require('yargs').argv,
  config = require('./gulp.config')(),
  del = require('del'),
  browserSync = require('browser-sync'),
  port = process.env.PORT || config.defaultPort,
  $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('help', $.taskListing);
gulp.task('default', ['opt']);
gulp.task('opt', ['inject', 'fonts', 'images'], function() {
  log('Optimizing the javascript, css and html');
  var assets = $.useref.assets({ searchPath: './' });
  var cssFilter = $.filter('**/*.css');
  var jsLibFilter = $.filter('**/' + config.optimized.lib);
  var jsAppFilter = $.filter('**/' + config.optimized.app);
  var templateCache = config.temp + config.templateCache.file;
  return gulp.src(config.index)
    .pipe($.plumber())
    .pipe($.inject(
      gulp.src(templateCache, { read: false }), {
        starttag: '<!-- inject:templates:js -->'
      }))
    .pipe(assets)
    .pipe(cssFilter)
    .pipe($.csso())
    .pipe(cssFilter.restore())
    .pipe(jsLibFilter)
    .pipe($.uglify())
    .pipe(jsLibFilter.restore())
    .pipe(jsAppFilter)
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe(jsAppFilter.restore())
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe(gulp.dest(config.build))
    .pipe($.rev.manifest())
    .pipe(gulp.dest(config.build));
});
/**
 * Bump the version
 * --type=pre will bump the prerelease version *.*.*-x
 * --type=patch or no flag will bump the patch version *.*.x
 * --type=minor will bump the minor version *.x.*
 * --type=major will bump the major version x.*.*
 * --version=1.2.3 will bump to a specific version and ignore other flags
 */
gulp.task('version', function() {
  var msg = 'Versioning';
  var type = args.type;
  var version = args.version;
  var options = {};
  if (version) {
    options.version = version;
    msg += ' to ' + version;
  } else {
    options.type = type;
    msg += ' for a ' + type;
  }
  log(msg);
  return gulp.src(config.packages)
    .pipe($.bump(options))
    .pipe(gulp.dest(config.root));
});
gulp.task('fonts', ['clean:fonts'], function() {
  log('Copying the Fonts');
  return gulp.src(config.fonts)
    .pipe(gulp.dest(config.build + 'fonts'));
});
gulp.task('images', ['clean:images'], function() {
  log('Copying the Images and Compressing them');
  return gulp.src(config.images)
    .pipe($.imagemin({ optimizationLevel: 4 }))
    .pipe(gulp.dest(config.build + 'images'));
});
gulp.task('serve:dev', ['inject'], function() {
  server(true);
});
gulp.task('serve:build', ['opt'], function() {
  server(false);
});
gulp.task('wiredep', function() {
  log('Wire up the bower css js and our app js into html');
  var options = config.getWiredepDefaultOptions();
  var wiredep = require('wiredep').stream;
  return gulp.src(config.index)
    .pipe(wiredep(options))
    .pipe($.inject(gulp.src(config.js)))
    .pipe(gulp.dest(config.client));
});
gulp.task('inject', ['wiredep', 'styles', 'templatecache'], function() {
  log('Wire up the app css into the html and call wiredep');
  return gulp.src(config.index)
    .pipe($.inject(gulp.src(config.css)))
    .pipe(gulp.dest(config.client));
});
gulp.task('watcher:less', function() {
  gulp.watch(config.less, ['styles']);
});
gulp.task('styles', ['clean:styles'], function() {
  log('Compiling Less --> CSS');
  return gulp.src(config.less)
    .pipe($.plumber())
    .pipe($.less())
    .pipe($.autoprefixer({
      browser: [
        'last 2 version',
        '> 5%'
      ]
    }))
    .pipe(gulp.dest(config.temp));
});
gulp.task('clean', function() {
  log('Cleaning Styles, Images and Fonts');
  var delconfig = [].concat(config.build, config.temp);
  clean(delconfig);
});
gulp.task('clean:fonts', function() {
  var files = config.build + 'fonts/**/*.*';
  clean(files);
});
gulp.task('clean:images', function() {
  var files = config.build + 'images/**/*.*';
  clean(files);
});
gulp.task('clean:styles', function() {
  var files = config.temp + '**/*.css';
  clean(files);
});
gulp.task('templatecache', ['clean:code'], function() {
  log('Creating AngularJS $templateCache');
  return gulp.src(config.htmltemplates)
    .pipe($.minifyHtml({ empty: true }))
    .pipe($.angularTemplatecache(
      config.templateCache.file,
      config.templateCache.options
    ))
    .pipe(gulp.dest(config.temp));
});
gulp.task('clean:code', function() {
  var files = [].concat(
    config.temp + '**/*.js',
    config.build + '**/*.html',
    config.build + 'js/**/*.js'
  );
  clean(files);
});
gulp.task('vet', function() {
  log('Analyzing source with JSHing and JSCS');
  return gulp.src(config.alljs)
    .pipe($.if(args.verbose, $.print()))
    .pipe($.jscs({ fix: true }))
    .pipe($.jscs.reporter())
    .pipe($.jscs.reporter('fail'))
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
    .pipe($.jshint.reporter('fail'));
});
function server(isDev) {
  var nodeOptions = {
    script: config.nodeServer,
    delayTime: 0,
    env: {
      'PORT': port,
      'NODE_ENV': isDev ? 'dev' : 'build'
    },
    watch: [config.server]
  };
  return $.nodemon(nodeOptions)
    .on('restart', ['vet'], function(ev) {
      log('*** nodemon restarted ***');
      log('files changed on restart:\n' + ev);
      setTimeout(function() {
        browserSync.notify('reloading now...');
        browserSync.reload({ stream: false });
      }, config.browserReloadDelay);
    })
    .on('start', function() {
      log('*** nodemon started ***');
      startBrowserSync(isDev);
    })
    .on('crash', function() {
      log('!!!!!!! nodemon CRASHED !!!!!');
    })
    .on('exit', function() {
      log('*** nodemon bye bye ***');
    });
}
function changeEvent(event) {
  var srcPattern = new RegExp('/.*(?=/' + config.source + ')/');
  log('File ' + event.path.replace(srcPattern, '') + ' ' + event.type);
}
function startBrowserSync(isDev) {
  if (args.nosync || browserSync.active) {
    return;
  }
  log('Starting browser-sync');
  if (isDev) {
    gulp.watch(config.less, ['styles'])
      .on('change', function(event) {
        changeEvent(event);
      });
  } else {
    gulp.watch([config.less, config.js, config.html], ['opt', browserSync.reload])
      .on('change', function(event) {
        changeEvent(event);
      });
  }
  var options = {
    proxy: 'localhost:' + port + (isDev ? '/panel/client' : '/build'),
    port: 9000,
    files: isDev ? [
      config.client + '**/*.*',
      '!' + config.less,
      config.temp + '**/*.css'
    ] : [],
    ghostMode: {
      clicks: true,
      location: false,
      forms: true,
      scroll: true
    },
    injectChanges: true,
    logFileChanges: true,
    logLevel: 'debug',
    logPrefix: 'Leonardo',
    notify: true,
    reloadDelay: 0
  };
  browserSync(options);
}
function clean(path) {
  log($.util.colors.red.bold('Cleaning: ' + path));
  del.sync(path);
}
function log(msg) {
  if (typeof(msg) === 'object') {
    for (var item in msg) {
      if (msg.hasOwnProperty(item)) {
        $.util.log($.util.colors.blue(msg[item]));
      }
    }
  } else {
    $.util.log($.util.colors.blue(msg));
  }
}


이제 npm run serve로 개발 또는 로컬 서버를 정상적으로 실행합니다. 그러나 프로덕션 서버는 다음을 제공합니다.

로더 스피너가 작동하는 것을 볼 수 있지만 페이지의 모든 것이 빌드되고있는 것은 아닙니다. 또한 이것은 내 Dockerfile 및 entrypoint.sh입니다.

FROM nginx:1.14.0
RUN apt-get update
RUN apt-get install vim -y
RUN apt-get install -y git
RUN apt-get -y install g++
RUN apt-get install build-essential -y
RUN apt-get install curl -y
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -
RUN apt-get install nodejs -y
RUN npm install -g gulp
RUN npm install -g bower
WORKDIR /usr/share/nginx/html
COPY package*.json /usr/share/nginx/html/
#ADD package.json /usr/share/nginx/html
RUN npm install
ADD . /usr/share/nginx/html
RUN bower install --allow-root -f
ADD ./nginx.conf /etc/nginx/conf.d/default.conf
RUN chmod a+x ./entrypoint.sh
CMD ./entrypoint.sh

#!/bin/bash
gulp build --mode=$NODE_ENV
nginx -g 'daemon off;'

도커 PS

CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS                 PORTS                                            NAMES
1ff42de7aab3        flex-frontend   "/bin/sh -c ./entryp…"   9 minutes ago       Up 9 minutes           0.0.0.0:8080->80/tcp                             frontend_1
16e2683d51bf        backend    "/bin/sh -c ./entryp…"   9 minutes ago       Up 9 minutes           0.0.0.0:3000->3000/tcp, 0.0.0.0:8443->8443/tcp   backend_1
c4f02481efce        nginx                        "/bin/bash -c 'nginx…"   About an hour ago   Up About an hour       0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp         nginx_web_1

https 구성을 가진 또 다른 nginx docker 이미지가 있습니다. 이런 식으로 보입니다.

location = / {
        proxy_pass      http://servers_internal_ip:8080/panel/client/index.html;
    }

여기에 무슨 문제가 있는지 잘 모르겠습니다. 그것이 gulpfiles이거나 nginx 설정이 올바른 위치를 가리 키지 않는 경우

수정 : / build 폴더가 올바르게 빌드되지 않습니다. 트리 출력을 확인하십시오.

├── fonts
│   ├── FontAwesome.otf
│   ├── Simple-Line-Icons.eot
│   ├── Simple-Line-Icons.svg
│   ├── Simple-Line-Icons.ttf
│   ├── Simple-Line-Icons.woff
│   ├── Simple-Line-Icons.woff2
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   ├── fontawesome-webfont.woff2
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
├── index.html
├── js
│   └── lib-b5b0862f96.js
├── rev-manifest.json
└── styles
    └── lib-7f60b29f0b.css

따라서 모든 자바 스크립트 파일을 올바르게 컴파일하고 있다고 생각하지 않으며 위의 오류가 발생합니다. 최소화되지 않은 모든 파일은 panel/client /에 있습니다. 프로덕션 파일은 내 gulpfile.js로/build로 이동해야합니다. 또한 내가 docker exec -it containerid bash 했을 때 프로젝트의 루트 만/build 폴더를 볼 수 없었습니다.


  • 답변 # 1

    2 단계에서 올바른 축소 폴더를 지정하는 것처럼 docker multi-stage builder 패턴을 사용하여 이미지를 아래와 같이 작게 만듭니다

    FROM node:10-alpine 
    RUN npm install -g gulp
    RUN npm install -g bower
    ARG environment
    ENV PROFILE ${environment}
    COPY . /app
    WORKDIR /app
    RUN npm  install --loglevel verbose
    RUN gulp build --mode=${PROFILE}
    FROM nginx:alpine as build
    ADD ./nginx.conf /etc/nginx/conf.d/default.conf
    COPY --from=0 /app/{your minified folder} /usr/share/nginx/html
    
    

관련 자료

  • 이전 angular - 비동기 파이프를 통해 사용되는 재 할당 관찰 가능
  • 다음 python - 가능한 모든 길이로 키를 사용하여 단어 사전을 만들려고합니다