Q&A
バンドルすると、少なくとも JavaScript に関しては一つのファイルになるので、フォルダ構成とか関係ないような…。
前提
- フロントエンド開発(webpack,react ...)でのフォルダ構成について聞きたい(特にバンドル後のフォルダ構成)
- それに対応したDockerファイルを作りたいです。
Atomic Designは保守しにくそうなので使用はしません。
またreactのdocumentには、最初は何もフォルダを分けずに開発し、
分けたくなったら好きなように分ければいいと書いてありましたが、
あえて先にフォルダ構成を考えています。
そもそもフロントにdockerが必要なのか？などの指摘は大丈夫です。
実際のコード
現在イメージしているディレクトリ構造
app/frontend/ | |-build/(webpackでバンドルされたjsファイル群) | |- |-src/ | |-fetures(機能ごとに分けるフォルダ) | | | |-components(fetures以下共通で使うコンポ－ネントフォルダ) | | | |-hooks(fetures以下共通で使うhookフォルダ) | | | |-functions(fetures以下共通で使う関数フォルダ) | | | |-providers(プロバイダーを入れるフォルダ) | | | |-routes(ルートを入れるフォルダ) | | | |-pages(各ページが入る) | | | |-assets(画像などを入れるフォルダ) | | | |-test(テスト用フォルダ) | |-package.json | . | . webpack.common.jsなどの設定ファイル群 | . |-Dockerfile |-.dockerignore
大体こんな感じのイメージです。
一番聞きたいのはバンドル後のbuildフォルダをふつうはどのように構成するのかわからないです。
他ももし何かもっとうまく保守できるTipsがあると教えていただきたいです。
現在作成中のDockerfile
FROM node:18.9.0-alpine3.15 AS build-frontend ENV NODE_ENV=development WORKDIR /app/frontend COPY package.json . COPY package.lock.json . RUN npm install COPY ./frontend . EXPOSE 3000 //何をベースイメージにすればいいのか不明 FROM ？ WORKDIR /app/frontend //フォルダ構成がよくわかってないのでこれでいいのかわからない COPY --from build-frontend ./frontend/build /src CMD ["npm", "start"]
Dockerfileで聞きたいこと(いろいろなサイトとかgithubとか見ました)
-
マルチステージビルドの使い方があっているのか
-
CMD ["npm", "start"]としているがgithubでこれしている人が多かったというだけで使っていて本来の意図した使い方がわからない(CMDが何をするコマンドなのかは理解しています。)
-
マルチステージビルドのベースイメージの選定がよくわからない
間違っている記述や、他にも付けたしたほうがいいコマンドがあれば教えていただきたいです。
ex. Dockerfile内で一般ユーザーを作るべきなど...
よろしくお願いします。
自分が書いたwebpackの設定ファイルです。
webpack.common.js
```js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
another: './src/js/another.js',
},
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/[name].[contenthash].js',
chunkFilename: 'js/[name].[contenthash].js',
},
optimization: {
splitChunks: {
chunks: 'initial',
cacheGroups: {
vendor: {
test: /node_modules/,
name: 'vendor',
},
ownModules: {
test: /src[\\/]js[\\/]modules/,
name: 'own-modules',
minSize: 0,
minChunks: 2,
},
},
},
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true,
},
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.s[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
generator: {
filename: `./image/[name].[contenthash][ext]`,
},
type: 'asset/resource',
},
{
test: /\.html$/,
loader: 'html-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/html/index.html',
chunks: ['index'],
}),
new HtmlWebpackPlugin({
filename: 'another.html',
template: './src/html/another.html',
chunks: ['another'],
}),
new MiniCssExtractPlugin({
filename: './css/[name].[contenthash].css',
}),
],
};
```
HtmlWebpackPluginを使用することによってエントリーポイントを複数にすることで、エントリーポイン
トと、サービスの1ページ１ページを対応させるように開発しようと思っています。
そうすると、一度のビルドで複数の、バンドルされたjsファイルを読み込んだhtmlファイルが出力されると思いますが、その時のhtmlファイルはフォルダ構成とか作るのかベタで並べるだけなのか知りたい感じです。
HtmlWebpackPlugin は使ったことない (そもそも一般的なのでしょうか？) ですが、たぶん最終的にユーザーがアクセスする URL の構造に合わせて出力することになるのでは…。
おそらくプラグインの中では割と使われていると思っています。
冷静に考えると普通に開発するときのURL設計と変わらないですね。
webpackが入ってきたのでこんがらがっていました。
イメージををビルドしたら、自動でバンドルして、バンドルされたファイルを自動で
nginxのドキュメントルート配下にコピーするところまで自動化したかったのですが、
ファイル更新するたびに
イメージをビルドしなおす手間を考えると、手動でバンドルコマンドたたいて、意図したディレクトリに配置する方がいい気がしてきました。
返答ありがとうございます。
あなたの回答
tips
プレビュー
