常連

注目の的

基盤初心者です。
web三層構造は、webサーバー、webAPサーバー、データベースサーバーで構築された基盤と解釈しています。

画像だと、webサーバーとwebAPサーバーが別れていないと思いますが、なぜ下記画像が三層構造と言えるのでしょうか。


※下記リンクから抜粋しました。
https://note.com/agw/n/n4ff3fc9f6bd9
![イメージ説明](5e037edf12c1987e561064815d9af063.png)

基盤構築におけるweb三層構造が理解できない

### 前提・実現したいこと
ブラウザ上で作成したGithubのリモートリポジトリにブラウザから直接作業してきたディレクトリをアップロードしたのですが、ディレクトリの中にディレクトリをアップロードしてしまったので不要なディレクトリの削除をしたいです。


### なぜ、このような事象が起きてしまったのか？
簡単にディレクトリの中にディレクトリをアップロードしてしまう経緯をお話しします。
※ローカルリポジトリとリモートリポジトリは紐付けてある前提です。

①Githubにブラウザ上でリモートリポジトリの作成
↓
②git cloneでクローンを作成しmasterブランチとは別にdevelopブランチを作成し作業
↓
③作業を終えcommitしgit push origin developでリモートリポジトリにpush
↓
④ブラウザ上で作業したフォルダをドラッグ＆ドロップでアップロード
↓
⑤次の日に作業をし終了時にcommitしgit push origin developでpush
↓
⑥リモートリポジトリのファイルを確認したところ最新のものに更新されていなかったのでディレクトリの中にディレクトリを再度アップロードしてしまった

という流れです。
　
　
　
**現在の状況**
![イメージ説明](4f6daef384e32008287feb54128fe46c.png)
　

　
　
### 質問内容
１. Githubにアップロードしたファイルはpushしただけでは最新のものに更新されないのでしょうか？
更新する方法があるのであれば教えていただきたいです。

２. Github上の不要なディレクトリやファイルの削除方法についても教えていただきたいです。


検索の方法が悪いのか解決するような記事を見つけることができませんでしたので、
ご教授いただけると幸いです????‍♂️

Githubにアップロードしてしまったディレクトリの削除方法について教えてください。

###実現したいこと
~~下図のように<a>タグを入れ子にしたいです。~~
下図のように<a>タグを入れ子にせずに、入れ子にしたかのような機能にしたいです。

![イメージ説明](598fa59e17fccae2960727697e6fd3c5.png)

###3つの方法
[aタグの中でaタグを利用する方法](https://pg.kdtk.net/2028)というブログ記事に次の3つの方法があります。

> 1 objectタグを利用する方法
2 cssのpositionを利用する方法
3 javascript(onclick)を利用する方法

しかしいずれもSEO的に不利とのこと。
そんな中でどれがマシだと思いますか？

###自分の考え
SEOに詳しくない自分の考えでは、次のようなデメリットのない1がマシと思いました
しかし見落としや別の意見を伺いたいです。（1はSEO的に圧倒的に不利だ、など。）
ご助言宜しくお願い致します。

> 1 objectタグを利用する方法

→マークアップ的に微妙だが、下記1や2の実用デメリットが見当たらない点でマシ

> 2 cssのpositionを利用する方法

→CSSで無理やり変えているためHTMLを見たときに階層がわかりにくいデメリット

> 3 javascript(onclick)を利用する方法

→右クリック時に「新しいタブで開く」などメニューがカーソルのものとズレてしまう点が使いにくいデメリット
→ホイールクリックやユーザー定義の操作は<a>タグで囲まれていないと起動できないデメリット（※追記）




###補足
すべての<a>タグはpjaxでの遷移を予定しています。

<a>を入れ子にせずに、入れ子にしたかのような挙動を実現する方法

### 前提・実現したいこと

GAS初心者です。
説明がうまくできず申し訳ないのですが、
お分かりになる方ご教唆願います。


スプレッドシート（作業依頼表）の内容をスプレットシート（テンプレート）をコピーした
ものに移す作業で
スプレッドシート（テンプレート）を参照するところでエラーとなります。

先日まで１年近く問題なく動作していたのですが、急にエラーとなりました。



### 発生している問題・エラーメッセージ

```
"Exception: ドキュメント（xxxxxxxxxx）にアクセス中に　スプレッドシート のサービスに接続できなくなりました。"
```

"Exception: ドキュメント（xxxxxxxxxx）にアクセス中に　スプレッドシート のサービスに接続できなくなりました。"

# 状況
Amazon Linux2で現在、あるサービスをdocker-composeで運用しています。
IPアドレスとドメインを紐づけており、ブラウザからそのサービスが見れる状況です

# やりたいこと
この１つのサーバにもう一つ全く別のサービスをdocker-composeを使って、運用したいです。

# 疑問点
そもそも上記のことは可能なのでしょうか
IPアドレスが一緒の場合、ドメインをどう紐づければいいのか知りたいです

１つのサーバに複数のdocker-composeを運用したい

いつもお世話になっております。

現在とあるVueを取り入れたプロジェクトを取り組んでおります。 
当方、Vueを使用した案件は初めてなので、
初歩的ですが肥大化したコードのファイル分割をしたいと思っています。

以下のように複数の機能が１つのVueインスタンスに記述してしまったので、 
ここから機能ごとにファイル分割をしようと思っているのですが、
どのように分ければ良いのでしょうか？

※現在は「モバイルメニュー開閉」「アコーディオン」「スムーススクロール」の
３つの機能が入っているので、これを別々のファイルに分割したいと思っています。


```javascript

/*  main.js  */

// eslint-disable-next-line import/no-extraneous-dependencies import Vue from 'vue/dist/vue.esm'; import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/swiper.scss'; import VueScrollTo from 'vue-scrollto';
Vue.use(VueAwesomeSwiper); Vue.use(VueScrollTo, { offset : -100, cancelable: false });
const app = new Vue({
data() { return {
  /* モバイルメニュー開閉 */
  isOpen : false,
  isReady: false,

  /* アコーディオン */
  isActive: 1

};
},
mounted() { const el = document.getElementsByClassName('faq__a'); this.accordionToggle(el);
this.isReady = !this.isReady;

/* 別ページからのスムーススクロール */
const { hash } = window.location;
if ( hash ) {
  this.scrollToHash();
}
},
methods: {
/*  別ページからのスムーススクロール  */
scrollToHash() {
  const { hash } = window.location;
  this.$nextTick(() => {
    this.$scrollTo(hash, 1000);
  });
},

/*  モバイルメニュー  */
toggleMenu() {
  this.isOpen = !this.isOpen;
},

/*  アコーディオン  */
accordionToggle(el) {
  for ( let i = 0; i < el.length; i += 1 ) {
    el[ i ].addEventListener('click', () => {
      // todo アロー演算子でthisの挙動が変わったので、修正する
      el[ i ].classList.toggle('active');
      el[ i ].nextElementSibling.classList.toggle('active');
    });
  }
}
}
});
app.$mount('#app');
```

###環境
vue@2.6.12

Vueのファイル分割について

### 前提・実現したいこと

Nuxt.jsで
vue-slick-carousel　のプラグインを使ってカルーセル実装を開発環境でできたのですが、
yarn build でbuildすると表示が崩れてしまいます。これを解決したいです。
他にvue-awesome-swiper　でも作ってみましたが、設定をしても
next.prevのボタンが効かなかったりドットが出なかったりしてうまくいかなく、
どうにかvue-slick-carouselでの実装で挙動して欲しいです。
よろしくお願いします。

nuxt.config.js
```javascript
  plugins: [
    { src: '@/plugins/slick.js', ssr: false },
  ],
  build: {// プラグインがES6などで書かれている場合はビルドの指定も必要になる
    // transpile:['vue-slick-carousel']
    vendor: [
      // 'vue-awesome-swiper',
      'vue-slick-carousel'
    ],
    plugins: [
      new webpack.ProvidePlugin({
        // グローバルなモジュール
        $: 'jquery',
        _: 'lodash'
      })
    ]
  },

```


~/plugin/slick.js
```javascript
import Vue from 'vue'
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

Vue.use(VueSlickCarousel)
```

comp-slick.vue
```javascript
<template>
  <no-ssr>
    <VueSlickCarousel v-bind="settings">
      <div>
        <div class="case-list">
         スライド1の内容（割と長いhtml）
        </div>
      </div>
      <div>
        <div class="case-list">
         スライド2の内容
        </div>
      </div>
　　　　　　以下省略
      </div>
      <template #prevArrow="arrowOption">
        <div class="custom-arrow">
          {{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
        </div>
      </template>
      <template #nextArrow="arrowOption">
        <div class="custom-arrow">
          {{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
        </div>
      </template>
      <template #customPaging="page">
        <div class="custom-dot-case">
          {{ page }}
        </div>
      </template>
    </VueSlickCarousel>
  </no-ssr>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  export default {
    components: {
      VueSlickCarousel
    },
    data() {
      return {
        settings: {
          arrows: true,
          dots: true,
          // focusOnSelect: true,
          // infinite: true,
          speed: 500,
          slidesToShow: 4,
          slidesToScroll: 4,
          // adaptiveHeight: true,
          "responsive": [
              {
                "breakpoint": 768,
                "settings": {
                  "slidesToShow": 2,
                  "slidesToScroll": 2,
                }
              },
          ]
        },
      }
    },
  }
</script>

```


### 発生している問題・エラーメッセージ

```
開発環境・build後の環境でエラーは出ません
```

### 該当のソースコード

```
```

### 試したこと
vue-slickをNuxt.jsで使用した時の「window is not defined」エラー解消法
https://ti-tomo-knowledge.hatenablog.com/entry/2020/06/23/005607

### 補足情報（FW/ツールのバージョンなど）
    "nuxt": "^2.0.0",
"vue-slick-carousel": "^1.0.6"

ここにより詳細な情報を記載してください。

vue-slick-carousel実装：dev環境では挙動問題ないのにbuild後で表示が崩れる

ご覧いただきありがとうございます。
DjangoRESTFrameworkとReactでSPAを勉強している初学者です、
現在トークンを使用したユーザー認証周りを実装しています。

SPAにおけるトークン認証について色々と調べていると、
API側でトークンの生成が確認→curlコマンドでリクエストにトークンを含めて通るか確認→終了の記事が多く、
その後フロントでトークンをどう保持するか、どうリクエストに埋め込むかのベストプラクティスにたどり着けず
今回質問させていただきます。

自分で色々と考えてみた結果現在は、
**新規登録時やログイン時に帰ってくるトークンをstateで保持し、認証が必要なリクエストのヘッダーに含める**という方法を取っているのですが、
これはベターな方法と言えますか？

また、stateで管理をしていると、ログイン直後にページを再読み込みなどすると、
stateで保持したトークンは消えてしまうので、
**ユーザーが自らログアウトを行わない限りstateにトークンを保持し続ける**という挙動を期待する場合、
reduxなどで状態管理を行うのが一般的なのでしょうか？

拙い質問で申し訳ありませんが、ご回答、アドバイスや参考リンクなどいただければ幸いです。
登録、ログインのリクエストを行なっているReactのソースコードを添付しますが、
他に必要なコードがあれば随時追加いたします。
何卒ご教授よろしくお願いいたします。

```Homejs
    signUp(username, email, password, password_confirmation){
        axios({
            method : 'POST',
            url : 'http://localhost:8000/api/v1/rest-auth/registration/',
            data : {username: username, email: email, password1: password, password2: password_confirmation}
        })
        .then(()=>{
            this.login(username, email, password);
        })
        .catch(err => {
            console.log(err);
        });
    }
    login(username, email, password){
        axios({
            method : 'POST',
            url    : 'http://localhost:8000/api/v1/rest-auth/login/',
            data   : {username: username, email: email, password: password},
        })
        .then(res=>{
            this.setState({key: res.data.key});
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });
    }
```

###使用ライブラリ
```ここに言語を入力
django-cors-headers
djangorestframework-jwt
django-rest-auth
django-allauth
```

ここ数日調べたり自分で考えてみた結果を書きますので、
こちらについてもご意見いただければ嬉しいです。

・react,reduxのstate管理→どうしてもリロードで消える
・localstorage→試したところやりたいことは実現できました。
しかし色々と調べていると重要情報を保存するのはよくないと目にしたので他の方法を検討中です。
・reduxのstoreを永続化できるライブラリを使う→結局localstorage
・帰ってきたトークンをReactでcookieにセットする→httponlyができなくなる？
・帰ってきたトークンをDjangoでcookieにセットする→現在これが実現できないか試しています