Переглянути джерело

[docs] localized latest blogs into Japanese (Three blogs published in March 2021)

Tatsuo Kawasaki 4 роки тому
батько
коміт
9904eaa893

+ 280 - 0
docs/gethue/content/jp/posts/2021-03-04-vue3-build-cli-options-composition-api-template-web-components-hue.md

@@ -0,0 +1,280 @@
+---
+title: Vue 3 の紹介と Hue クエリエディタでの Web コンポーネント
+author: Hue Team
+type: post
+date: 2021-03-04T00:00:00+00:00
+url: /blog/vue3-build-cli-options-composition-api-template-web-components-hue
+sf_thumbnail_type:
+  - none
+sf_thumbnail_link_type:
+  - link_to_post
+sf_detail_type:
+  - none
+sf_page_title:
+  - 1
+sf_page_title_style:
+  - standard
+sf_no_breadcrumbs:
+  - 1
+sf_page_title_bg:
+  - none
+sf_page_title_text_style:
+  - light
+sf_background_image_size:
+  - cover
+sf_social_sharing:
+  - 1
+sf_related_articles:
+  - 1
+sf_sidebar_config:
+  - left-sidebar
+sf_left_sidebar:
+  - Sidebar-2
+sf_right_sidebar:
+  - Sidebar-1
+sf_caption_position:
+  - caption-right
+sf_remove_promo_bar:
+  - 1
+ampforwp-amp-on-off:
+  - default
+categories:
+  - Version 4.10
+  - Dev / API
+
+---
+
+Hue プロジェクトは 10 年以上の長い歴史があります。この間、私たちが使用していた技術の中にはかなり古くなったものもあります。そのため、Hue の改善点を検討する際、UI 技術のアップグレードが最優先されました。
+
+Hue は[Mako](https://www.makotemplates.org/) と [Knockout JS](https://knockoutjs.com/) ライブラリを組み合わせて全ての UI を作成しています。現時点では新しいライブラリの方が生産性が高いため、最新のベストを探すことにしました。私たちの目標は次の通りです:
+- 最新の UI ライブラリを導入し、将来的に Knockout JS を置き換える
+- [コンポーネント](https://docs.gethue.com/developer/components/) をパッケージ化し、さまざまなプロジェクトで共有する
+- 部分的なサーバーサイドレンダリングから完全なクライアントサイドのレンダリングに移行
+- コードの品質を高めるため Typescript の導入
+
+[React](https://reactjs.org/) と [Vue](https://vuejs.org/) が最有力候補でした。[Angular](https://angularjs.org) と [Svelte](https://svelte.dev) も候補に挙がっていました。何度からブレインストーミングを行った結果、Vue.js を採用することにしました。どのフレームワークも動的なインターフェイスを書くための生産的な方法を提供していますが、Vue はさしでがましくなく、 非常に高速で小さく、そして最も重要なことに、私たちの現在の[コンポーネント化](https://docs.gethue.com/developer/components)の取り組みに良く適合していたので Vue が選ばれました。最初は Vue 2 を使っていましたが、すぐに Vue 3 がリリースされたので、代わりに Vue 3 を使用することに決めました。移行する前にいくつかの質問に答える必要がありました。
+- Vue のビルドプロセスをどのようにセットアップするか?
+- 最適なコンポーネント構文は何か?
+- Web コンポーネントとしてパッケージ化する方法は?
+
+## ビルドプロセス
+
+Hue では UI のビルドに webpack を使用していました。コンポーネントを徐々にアップグレードしていく計画だったので、古い UI のコードと新しい UI のコードの両方で動作するセットアップが必要でした。幸運なことに、Vue CLI によって作成された boilerplate プロジェクトは、内部で webpack を使用していることがわかりました。そこで CLI を使ってダミープロジェクトを作成し、依存関係や設定をコピーすることにしました。
+
+ダミープロジェクトの作成はとても簡単でした。`npm install -g @vue/cli` を使用して CLI をインストールし、`vue create hue-dummy` でプロジェクトを作成します。作成中、プロジェクトのプリセットではなくプロジェクトの機能を手動で選択することにし、以下のように Vue Version, Babel, Typescript, CSS Preprocessor, Linter & Unit Tests を選択しました。
+
+    Vue CLI v4.5.11
+    ? Please pick a preset: Manually select features
+    ? Check the features needed for your project:
+    ◉ Choose Vue version
+    ◉ Babel
+    ◉ TypeScript
+    ◯ Progressive Web App (PWA) Support
+    ◯ Router
+    ◯ Vuex
+    ◉ CSS Pre-processors
+    ◉ Linter / Formatter
+    ❯◉ Unit Testing
+    ◯ E2E Testing
+
+続くページでは、Vue 3, Typescript, SASS, Prettier, Lint, Jest および CLI でダミープロジェクトの作成を開始しました。
+
+    Vue CLI v4.5.11
+    ? Please pick a preset: Manually select features
+    ? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit
+    ? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
+    ? Use class-style component syntax? No
+    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
+    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
+    ? Pick a linter / formatter config: Prettier
+    ? Pick additional lint features: Lint on save
+    ? Pick a unit testing solution: Jest
+    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
+    ? Save this as a preset for future projects? (y/N) N
+
+プロジェクトが作成されたら `package.json` と Babel, ESLint などの設定ファイルの差分をとり、変更点をコピーして依存関係を更新しました。`webpack.config.js`, `vue-loader` および `babel-loader` ルールは .vue と .ts ファイルに対してそれぞれ置き、ビルドが開始されました。
+
+_注意: デモプロジェクトで問題になった設定の一つは`tsconfig.json` での `"jsx":"preserve"` でした。これは`<>` スタイルのタイプキャストと競合していました。Vue のテンプレートではなく JSX を使用したい場合は、型キャストに `as` キーワードを使うようにしてください。_
+
+## コンポーネントの構文、API、テンプレート
+
+プロジェクトが Vue と Typescript の機能を使ってビルドを開始したので、次の課題は、記述スタイル、ひいてはコンポーネントがどのように見えるのかを把握することでした。Vue はコンポーネントのさまざまな記述方法をサポートしています。
+
+### クラス形式の構文
+
+クラス形式の構文では、コンポーネントを ES6 のクラスとして定義します。コンポーネントのデータ、メソッド、およびその他のプロパティはデコレータでアノテートできます。また、継承やミックスインなどの、オブジェクト指向プログラミング(OOP)の機能の利用も容易になります。**Vue Class Component** は、Vue のコンポーネントをクラススタイルの構文で作成することができるライブラリです。Typescript と並んで、これは最もオブジェクト指向的なアプローチに見えました。しかし、**追加のライブラリに依存することになる**ため、他の方法を検討することにしました。さらに、これは次のセクションで説明するオプション API の構文上の補完に過ぎません。
+
+以下は、コンポーネントをクラス形式で表現したものです。
+
+    import Vue from 'vue'
+    import Component from 'vue-class-component'
+
+    @Component
+    export default class Counter extends Vue {
+      // Class definition
+    }
+
+### オブジェクト形式の構文とオプション API 
+
+オブジェクト形式では、コンポーネントを `options object` として定義します。コンポーネントのデータ、メソッド、プロパティは、オプションオブジェクトの子として定義されます。また、コンポーネントのライフサイクルの作ステージで呼び出される関数を追加することもできます。Vue では、これらをライフサイクルフックと呼んでいます。古エッらのオブジェクトのフォーマットとフックのシグネチャは、Vue オプション API で定義されています。Vue 3 が提供するネイティブな Typescript のサポートとともに、オブジェクトの形式は良好でした。しかし、Vue 3 はそれだけではありません!
+
+以下は、オブジェクト形式でコンポーネントを定義する方法です。
+
+    import { defineComponent } from 'vue';
+
+    export default defineComponent({
+      // Options object definition
+    });
+
+### Composition API
+
+[Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) は、Vue 3 が提供する、コンポーネントを作成するための新しい方法です。この方法では、`setup function` を使用して、完全なコンポーネントが構成されます。メソッドはネスト化されたクロージャー関数として定義され、リアクティブなデータメンバーは返却されるオブジェクトの子として返すことができます。onMounted のような特別な関数は、ライフサイクルフックを定義するために提供されます。
+
+以下は、オブジェクト形式でコンポーネントを定義する方法です。
+
+    import { defineComponent, onMounted } from 'vue';
+
+    defineComponent(() => {
+      return {
+        data: 1
+      };
+    });
+
+### 私たちのコンポーネントテンプレート
+
+最終的にはオブジェクト形式の構文を採用し、オプションとコンポジション API を組み合わせて、セットアップフックがセットアップ関数として機能するようにしました。**プロップやコンポーネントのような静的なアイテムを定義するのはオプション API で簡単にでき、reactive provide と inject のような動的なアイテムを定義するのはコンポジション API で簡単にできるので、組み合わせて使うことにしました。さらに、多くの Vue 3 のドキュメントの多くがこの形式を使用しています。** さまざまな資料を調べた結果、コンポーネントとして以下のようなテンプレートを作成しました。このテンプレートには、コンポーネントを定義するために使用できるさまざまなオプション(コンポーネント、ディレクティブ、プロップなど)が用意されており、使用する順番、各パーツがどのように相互作用するかなどが記載されています。このテンプレートは全てのコンポーネントのベースになります。
+
+    <template>
+      <Comp1 @click="onClick">Click Me!</Comp1>
+    </template>
+
+    <script lang="ts">
+      import { defineComponent, PropType, inject, provide } from 'vue';
+
+      import Comp1 from './Comp1.vue';
+      import AnotherComp2 from './Comp2.vue';
+
+      export default <T, K>() => defineComponent({
+        components: {
+          Comp1,
+          AnotherComp2
+        },
+
+        directives: {
+          'overflow-on-hover': overflowOnHover
+        },
+
+        provide(): {
+          hideDrawer: () => void;
+        } {
+          return {
+            hideDrawer: (): void => {
+              this.$emit('close');
+            }
+          };
+        },
+
+        props: {
+          propA: Boolean,
+          propB: {
+            type: String,
+            default: 'Abc'
+          },
+          items: {
+            type: Object as PropType<SidebarNavigationItem[]>,
+            required: true
+          }
+        },
+
+        emits: ['emitted-event-name'],
+
+        setup(props): { // Setup function for composition
+          const injectedReactiveValue: Type = inject('injectedReactiveValue');
+
+          return {
+            dataMember: false,
+            processedProp: !props.propA,
+            injectedReactiveValue
+          }
+        },
+
+        data(): {
+          return {
+              genericMember: null as <T | null>
+          };
+        },
+
+        computed: {
+          isActive(): Boolean { // Computed getter
+            // Statements
+          }
+        },
+
+        mounted(): void {
+          // Statements
+        },
+        unmounted(): void {
+          // Statements
+        },
+
+        methods: {
+          onClick(event: Event): void {
+            console.log(this.processedProp);
+          }
+        },
+
+        watch: {
+          items(): void { // Watches items prop
+            // Statements to be executed
+          }
+        },
+        created() {
+          this.$watch(
+            ():K => this.foo.bar, // Watch nested property bar of type K
+            (val:K, prevVal:K): void => {
+              // Statements to be executed
+            }
+          )
+        }
+      })
+    </script>
+
+## Web コンポーネント
+
+次の目標は、さまざまなプロジェクトで共有できるように、コンポーネントをパッケージ化することでした。現代の Web UI はさまざまな技術で構築されているため、フレームワークにとらわれない方法が必要でした。そこで登場したのが Web コンポーネントです。Web コンポーネントを使うと再利用可能なカスタム要素を作成し、その機能を他のコードから分離してカプセル化することができます。
+
+しかし驚いたことに、コンポーネントを Web コンポーネントに変換するための公式の Vue パッケージは Vue 3をサポートしていませんでした。また、[この問題](https://github.com/vuejs/vue-web-component-wrapper/issues/93)については、サポートが追加されるにはしばらく時間がかかりそうです。そこで代替手段を見つけなければなりませんでした。私たちは、Vue 3で動作する Vue 2 Web コンポーネントのラッパーの移植版を開発しました。名称は `vue3-webcomponent-wrapper` です。コードは[こちら](https://github.com/cloudera/hue/tree/master/desktop/core/src/desktop/js/vue/wrapper)で、npm パッケージは[こちら](https://www.npmjs.com/package/vue3-webcomponent-wrapper)から利用可能です。私たちの移植版では、リアクティブな属性、イベントとスロットをサポートしています。
+
+_注: 公式のラッパーのアップグレードを妨げる主な要因の一つは、Vue 3のビルドツールにshadow-root CSS インジェクションがないことでした。Hueではシャドウがなくても大丈夫だったので、これは問題ではなく、移植にはほとんど1日もかかりませんでした。_
+
+コンポーネントラッパーの使い方はとても簡単です。`npm i --save vue3-webcomponent-wrapper` でインストールできます。インストールが完了したら、次のような `my-component` という名前のカスタムタグを作成する方法を以下のスニペットで紹介します。
+
+Vue 2 と [@vuejs/vue-web-component-wrapper](https://github.com/vuejs/vue-web-component-wrapper) を使用する前の状態です。
+
+    import Vue from 'vue'
+    import wrapper from '@vue/web-component-wrapper'
+    import MyComponent from "./components/MyComponent.vue";
+
+    const CustomElement = wrapper(Vue, MyComponent)
+    window.customElements.define('my-component', CustomElement)
+
+Vue 3 と vue3-webcomponent-wrapper を使用した場合です。
+
+    import { createApp, h } from "vue";
+    import wrapper from "vue3-webcomponent-wrapper";
+    import MyComponent from "./components/MyComponent.vue";
+
+    const CustomElement = wrapper(MyComponent, createApp, h);
+    window.customElements.define("my-component", CustomElement);
+
+ラッパーの詳細については、こちらの[デモアプリ](https://github.com/sreenaths/vue3-webcomponent-wrapper-demo)でご確認ください。また、[この](https://github.com/cloudera/hue/blob/master/apps/metastore/src/metastore/templates/metastore.mako#L825) er-diagram タグは Hue プロジェクトでのラッパーの使用例です。
+
+### 公式の Vue 3 Web コンポーネントラッパーを使用する
+
+公式のラッパーは私たちの実装とよく似ているはずです。とはいえ、公式ラッパーの正確な関数シグネチャは現時点では不明です。今後のアップデートのために[このページ](https://www.npmjs.com/package/vue3-webcomponent-wrapper)をチェックしておいてください。
+
+## 以上で完成です!
+
+Hue は、Vue 3とコンポーネントラッパーを使用して、かなり古い技術の仕様から Web インターフェース開発の最前線へと移行しました。私たちは、コンポーネントプログラミングは分離して簡単に共有できるため、非常に効率的な開発パラダイムであると強く信じています。次のエピソードでは、新しい Hue 5 の API との統合について説明する予定です。
+
+~ Sreenath from the Hue Team

+ 103 - 0
docs/gethue/content/jp/posts/2021-03-06-web-api-service-upgrade-no-downtime-kubernetes-rollout.md

@@ -0,0 +1,103 @@
+---
+title: ダウンタイムなしに Web/API サービスのアップグレードを行う
+author: Hue Team
+type: post
+date: 2021-03-06T00:00:00+00:00
+url: /blog/2021-03-06-web-api-service-upgrade-no-downtime-kubernetes-rollout/
+sf_thumbnail_type:
+  - none
+sf_thumbnail_link_type:
+  - link_to_post
+sf_detail_type:
+  - none
+sf_page_title:
+  - 1
+sf_page_title_style:
+  - standard
+sf_no_breadcrumbs:
+  - 1
+sf_page_title_bg:
+  - none
+sf_page_title_text_style:
+  - light
+sf_background_image_size:
+  - cover
+sf_social_sharing:
+  - 1
+sf_related_articles:
+  - 1
+sf_sidebar_config:
+  - left-sidebar
+sf_left_sidebar:
+  - Sidebar-2
+sf_right_sidebar:
+  - Sidebar-1
+sf_caption_position:
+  - caption-right
+sf_remove_promo_bar:
+  - 1
+ampforwp-amp-on-off:
+  - default
+categories:
+  - Version 4.10
+  - Development
+
+---
+
+Kubernetes のロールアウトを活用して。
+
+この記事は、[Hue Query Service](http://gethue.com/) がどのように構築されているのかを説明する一連の投稿です。
+
+自動化がうまくいくと、反復的な作業から解放されると同時に、プロセスが文書化されるので、テームメンバーはより生産的に付加価値のある仕事ができるようになり、勢いを維持することができます。
+
+さて、プロジェクトのウェブ際の更新を、ダウンタイムや手作業を伴わずに自動的に行うにはどうすれば良いでしょうか。
+
+![[gethue.com](http://gethue.com)](https://cdn-images-1.medium.com/max/2596/1*MDLckdtZbtPCOsk6ghb4ug.png)*[gethue.com](http://gethue.com)*
+
+[gethue.com](https://gethue.com/) と [docs.gethue.com](https://docs.gethue.com/) ([jp.gethue.com](https://jp.gethue.com/) も忘れてはいけません) の全ては、メインの Kubernetes クラスタ内の小さなコンポーネントで動作しています。コンテナはこの種の静的なウェブサイトには少々太っ腹かもしれませんが、ソースコードの変更によって自動的に駆動し、全てのサービスが全く同じ流れに沿って調和するという便利なパターンを可能にしています。
+
+例えば [demo.gethue.com](https://demo.gethue.com/) では、デモウェブサイトで提供されている他のデータベースエンジンと同様に、同じデプロイのロジックを再利用しています。これらのウェブサイトも UI ではなく、GitHub の[コードの変更](https://github.com/cloudera/hue/tree/master/docs/gethue)によって駆動されます。
+
+例えば、以下は実行中のウェブサイトです。
+
+    kubectl get pods -ngethue
+    NAME READY STATUS RESTARTS AGE
+    docs-55bf874485-vjnlf 1/1 Running 1 8h
+    website-5c579d4dd-kqlvt 1/1 Running 0 60m
+    website-jp-964f9cc57-h97gz 1/1 Running 0 6h38m
+
+最近まで、毎日の再起動を「難しい方法」で行っていました。
+
+    kubectl delete pods -ngethue `kubectl get pods -ngethue | egrep ^website | cut -d" "-f1`
+
+これは「動作する」のですが、必要のないダウンタイムや「ノイズ」が発生します。
+
+![Hammered by “website is down” notifications](https://cdn-images-1.medium.com/max/2814/1*UxngKW7HUxkjEhjPH3Cc1A.png)*「Website is down」という通知に悩まされる*
+
+現在、標準的な Kubernetes の[rollout](https://kubernetes.io/docs/tutorials/kubernetes-basics/update/update-intro/) コマンドが使用されており、管理者や一般ユーザにとって等価的な移行となっています。
+
+    kubectl rollout restart -ngethue deployment/website
+
+![First diagram from the [Kubernetes documention](https://kubernetes.io/docs/tutorials/kubernetes-basics/update/update-intro/) demoing a rollout](https://cdn-images-1.medium.com/max/2000/1*DeOibHNKQh5Is9F756egeQ.png)*ロールアウトをデモする[Kubernetes のドキュメント](https://kubernetes.io/docs/tutorials/kubernetes-basics/update/update-intro/) からの最初の図*
+
+新しいwebsiteinstance/pod を起動し、準備ができたら古いものと入れ替えます。
+
+    kubectl get pods -ngethue
+    NAME                         READY   STATUS    RESTARTS   AGE
+    docs-55bf874485-vjnlf        1/1     Running   1          13h
+    website-75c7446d4c-z5p6g     0/1     Running   0          6s
+    website-bb6fc6b6-nkzqh       1/1     Running   0          18m
+    website-jp-964f9cc57-h97gz   1/1     Running   0          11h
+
+ここでは latest タグが使用されていますが、毎日レポジトリのミラーが同期されると新しいイメージが構築されることにご注意ください。静的ウェブサイトのイメージのビルドは非常にシンプルで、失敗したり誤ったイメージを送信する可能性は非常に低いです。適切なタグ付けを行うことで全ての状態がバージョン管理され、失敗したアップグレードは自動的に以前の有効な状態にロールバックされます。
+
+現在の要件は「100%自動化された、できる限りシンプルなものを毎日の頻度で」です。しかし、もっと「リアルタイム」にロールアウトしたいとしたらどうでしょう?(例えば各コミットやプルリクエスト、あるいは1時間ごと)これは計画中で、後続のブログ記事で詳しく説明します。
+
+</br>
+</br>
+
+ご意見や質問がありましたらお気軽にこちら、あるいは <a href="https://github.com/cloudera/hue/discussions">Discussions</a> までコメントして下さい。<a href="https://docs.gethue.com/quickstart/">quick start</a> で SQL をクエリして下さい!
+
+ご意見やアドバイスがありましたらお気軽にコメントお願いします!
+
+Romain from the Hue Team

+ 129 - 0
docs/gethue/content/jp/posts/2021-03-09-process-and-learnings-when-upgrading-the-webserver-stack-django-upgrade-1.11-to-3.1.md

@@ -0,0 +1,129 @@
+---
+title: Webserver スタックのアップグレード時のプロセスと学び - Django のアップグレード (1.11 から 3.1)
+author: Hue Team
+type: post
+date: 2021-03-09T00:00:00+00:00
+url: /blog/2021-03-09-process-and-learnings-when-upgrading-the-webserver-stack-django-upgrade-1-to-3
+sf_thumbnail_type:
+  - none
+sf_thumbnail_link_type:
+  - link_to_post
+sf_detail_type:
+  - none
+sf_page_title:
+  - 1
+sf_page_title_style:
+  - standard
+sf_no_breadcrumbs:
+  - 1
+sf_page_title_bg:
+  - none
+sf_page_title_text_style:
+  - light
+sf_background_image_size:
+  - cover
+sf_social_sharing:
+  - 1
+sf_related_articles:
+  - 1
+sf_sidebar_config:
+  - left-sidebar
+sf_left_sidebar:
+  - Sidebar-2
+sf_right_sidebar:
+  - Sidebar-1
+sf_caption_position:
+  - caption-right
+sf_remove_promo_bar:
+  - 1
+ampforwp-amp-on-off:
+  - default
+categories:
+  - Version 4.10
+  - Dev / API
+
+---
+
+Hue プロジェクトは約[10年前](/blog/2020-01-28-ten-years-data-querying-ux-evolution/) に開始されました。その間にいくつかの技術が古くなったり、非推奨になったりしたため、HUE の明るい未来のためにそれらをアップグレードする必要がありました。その中でも [Django](https://www.djangoproject.com/) のアップグレードは最も重要な者の一つでした。アップグレード前は Django 1.11 を使用していましたが、2020年4月に延長サポートが終了しました。
+![Djangoのロードマップ](https://cdn.gethue.com/uploads/2021/03/Django_roadmap.png)
+
+## ゴール
+
+* 1.11 のコンパイル/事項が可能ななま Django 3.1 (最新) で Hue が動作すること。
+
+## アップグレードの理由
+
+* 古いバージョンである [Django 1.11 は非推奨](https://www.djangoproject.com/download/#supported-versions)です。(例: セキュリティアップグレードや改善が受けられなくなります)。
+* Django 1.11 には Python 2 が必要ですが、これも[非推奨](https://docs.djangoproject.com/en/3.1/faq/install/#what-python-version-should-i-use-with-django)です。
+* [新しい機能、バグフィックス、改善](https://docs.djangoproject.com/en/dev/internals/deprecation/)が追加されています。
+* 新しい Django のリリースが利用可能になるたびにアップグレードすると、コードベースを最新に保つことができ、将来のアップグレードの負担が軽減されます。
+* 古いバージョンの Django をサポートしていない機能やライブラリもあります。(例: [DjangoRest framework](https://www.django-rest-framework.org/#requirements))。
+
+## 課題
+
+* 下位互換性を壊さないようにする。すなわち、同じコードベースで両方のバージョンをサポートする(選択肢がない場合は sys.version_info[0] < 3 スイッチを使用する)。
+* 私たちの製品の依存関係の中には Django の新しいバージョンをまだサポートしていなものがあります。このような場合は、依存関係がある製品の新しいバージョンがリリースされるまで待たなければならないかもしれません。
+
+## 計画
+
+* 大きなトレードオフ:
+  * Hue の Python 3 のビルドは Django 3 に移行する
+  * Python 2 は Django 1.11 のまま (Django 1.11 は Python 2 をサポートする最新バージョンなので)
+* ゆっくりではあるがしかし完璧に、後戻りしないように、私たちは Django を 1.11から 2.0、2.0から2.1、2.1から2.2、2.2から3.0、3.0から3.1へと段階的にアップグレードすることにしました。
+* 次のバージョンにアップグレードする前に、現在の Django のバージョンで発生した deprecation の警告を解決し、google sheet に保存します。
+* 警告を解決したら、計画通りに Django を次のバージョンへとアップグレードします。
+* 両方のバージョン(最後のバージョンとアップグレードしたバージョン)について、全ての[ユニットテスト](https://docs.gethue.com/developer/development/#testing)を実行します。テストが失敗した場合は、ユニットテストかアップグレードした関連部分の何かを修正する必要があります。
+* ビルド、パッケージ化、テストを行うための一貫した自動化の方法として [CircleCI](https://circleci.com/product/#how-it-works) を使用しています。
+  * ![Passed CircleCi](https://cdn.gethue.com/uploads/2021/03/Passed_CircleCi.png)
+  * 各コミットは CircleCI をパスしており、上のスクリーンショットでは CircleCI が両方のバージョン(build-py3.6 -> Django 3 and build -> Django 1.11)のコードをチェックしていることがわかります。
+  * ![Failed CircleCi](https://cdn.gethue.com/uploads/2021/03/Failed_CircleCi.png)
+  * そして、このスクリーンショットでは、Django 1.11 (build) でコミットが失敗していることがわかります。これは、私たちのコードが Django 1.11 で失敗していることを示しているので、それに応じてコードを変更する必要があります。
+* 以上の手順を毎回行えば、新しいバージョンに対応することができます。
+* Rinse and repeat (訳注: リンスは2度をお勧めします) :)
+
+## 主な変更と学んだこと
+
+* Django 1.11 から 2.0
+  * この移行では、主に2種類のアップグレードの修正が必要です
+    * 機能的な引数の追加や非推奨
+    * 古い依存関係が新しいバージョンの Django をサポートしていない
+  * しかし、“settings.MIDDLEWARE_CLASSES を使った古い形式のミドルウェアは非推奨” という大きな変更点があったので、2つの方法がありました。
+    * 自分でミドルウェアを書く。
+    * Django 1.10 形式のミドルウェアをアップグレードする。
+  * 私たちは後方互換性を求めているので後者の方法をとり、[instructions](https://docs.djangoproject.com/en/1.10/topics/http/middleware/#upgrading-pre-django-1-10-style-middleware)に注意深く従いました。
+
+
+* Django 2.0 から 2.1
+  * このアップグレードでは、“desktop.auth.backend.AllowFirstUserDjangoBackend.authenticate() が位置的な `request` 引数 を受け入れる必要がある“ という大きな変更があり、Python 2 + Django 1.11 と Python 3 + Django 2.1 の両方でコンパイルできるようにすることが課題となったので、sys.version_info[0] フラグ (つまり Python のバージョン) を使ってこの問題を解決しました。
+    * しかし、上記のアップグレードの際、LDAP 認証機能を見落としていたため、Django 3 になってからこの問題が発生しました。この問題は解決できましたが、本当の教訓は、可能な限り全てのものにユニットテストを追加することで、LDAP 認証用のモックユニットテストを追加しました。
+
+
+* Django 2.1 から 2.2
+  * 大きな問題は Django の admin アプリに関するものでした。基本的に Django 2.2 では admin アプリでエラーが発生していたので、mako テンプレートが原因ではないかと考えましたが、Django admin をそのようには使用しておらず、mako を[Vue.js](https://gethue.com/blog/vue3-build-cli-options-composition-api-template-web-components-hue/) に置き換えることもしていなかったので、これを無効化して、将来必要にあったら追加することを考えて進めました。
+
+
+* Django 2.2 から 3.0
+  * この移行では、‘django-babel’ という名前のサードパーティの依存関係が Django 2.2 までしかサポートしていないというエラーが出ました。議論の結果、[フォーク](https://github.com/gethue/django-babel)して setup.py ファイルを適宜変更すれば Django 3.0 で動作するようになることがわかりました。
+
+
+* Django 3.0 から 3.1
+  * 大きな変更はなく、‘STATICFILES_STORAGE’ が CachedStaticFilesStorage からManifestStaticFilesStorage に変わっただけでした。
+
+## それでは Hue with Django 3 を試してみましょう!
+  ```
+  git clone https://github.com/cloudera/hue.git   # Clone the Hue repository
+  export PYTHON_VER=python3.8                     # Before build set the Pyhton_VER like
+  make apps                                       # build the apps
+  ./build/env/bin/hue runserver
+  ```
+  注: 問題が発生した場合はこちらの[リンク](https://docs.gethue.com/developer/development/)を参照して下さい。
+
+</br>
+</br>
+
+ご意見や質問がありましたらお気軽にこちら、あるいは <a href="https://github.com/cloudera/hue/discussions">Discussions</a> までコメントして下さい。<a href="https://docs.gethue.com/quickstart/">quick start</a> で SQL をクエリして下さい!
+
+
+どうぞよろしくお願いします!
+
+Ayush from the Hue Team