\r\n \r\n \r\n \r\n

test

\r\n\r\n \r\n\r\n```\r\n\r\n```css\r\np {\r\n color: red;\r\n}\r\n```\r\n\r\n```js\r\nimport axios from \"axios\";\r\n\r\nconsole.log(\"import completed\");\r\naxios\r\n .get(\"http://127.0.0.1:8000/api/v1/\")\r\n .then(response => {\r\n console.log(\"status:\", response.status);\r\n console.log(\"axiosGetData:\", response.data);\r\n })\r\n .catch(err => {\r\n console.log(\"axiosGetErr\", err);\r\n });\r\nwindow.alert(\"test\");\r\n```\r\n\r\n```yml\r\nversion: '3'\r\n\r\nservices:\r\n db:\r\n image: postgres\r\n web:\r\n build: .\r\n command: python manage.py runserver 0.0.0.0:8000\r\n volumes:\r\n - .:/code\r\n ports:\r\n - \"8000:8000\"\r\n depends_on:\r\n - db\r\n```\r\n\r\n```Dockerfile\r\nFROM python:3\r\nENV PYTHONUNBUFFERED 1\r\nRUN mkdir /code\r\nWORKDIR /code\r\nCOPY requirements.txt /code/\r\nRUN pip install -r requirements.txt\r\nRUN apt-get install -y gnupg\r\nRUN curl -sL https://deb.nodesource.com/setup_10.x | bash -\r\nRUN apt-get install -y nodejs\r\nRUN npm install axios --save-dev\r\nCOPY . /code/\r\n```\r\n\r\n```txt\r\nDjango>=2.0,<3.0\r\npsycopg2>=2.7,<3.0\r\ndjangorestframework\r\n```\r\n\r\n### 試したこと\r\n\r\nここに問題に対して試したことを記載してください。\r\n①docker-composeで環境を作る\r\n②axiosを追加することに決める、dockerfileを書き直す。\r\n```\r\nFROM python:3\r\nENV PYTHONUNBUFFERED 1\r\nRUN mkdir /code\r\nWORKDIR /code\r\nCOPY requirements.txt /code/\r\nRUN pip install -r requirements.txt\r\nRUN apt-get install -y gnupg//追加\r\nRUN curl -sL https://deb.nodesource.com/setup_10.x | bash -//追加\r\nRUN apt-get install -y nodejs//追加\r\nRUN npm install axios --save-dev//追加\r\nCOPY . /code/\r\n```\r\n③ビルドした\r\n正常にビルド完了\r\n```\r\n➜ djangorestframework git:(master) ✗ sudo docker-compose build\r\ndb uses an image, skipping\r\nBuilding web\r\nStep 1/11 : FROM python:3\r\n ---> 34a518642c76\r\nStep 2/11 : ENV PYTHONUNBUFFERED 1\r\n ---> Using cache\r\n ---> ff4afb48bfa0\r\nStep 3/11 : RUN mkdir /code\r\n ---> Using cache\r\n ---> ceec010feebe\r\nStep 4/11 : WORKDIR /code\r\n ---> Using cache\r\n ---> e707d1b2e60a\r\nStep 5/11 : COPY requirements.txt /code/\r\n ---> Using cache\r\n ---> 1cc11eda6568\r\nStep 6/11 : RUN pip install -r requirements.txt\r\n ---> Using cache\r\n ---> bffc88f8924e\r\nStep 7/11 : RUN apt-get install -y gnupg\r\n ---> Using cache\r\n ---> 6d54121ce170\r\nStep 8/11 : RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -\r\n ---> Using cache\r\n ---> ee3599f7553c\r\nStep 9/11 : RUN apt-get install -y nodejs\r\n ---> Using cache\r\n ---> 40a7d3eee167\r\nStep 10/11 : RUN npm install axios --save-dev\r\n ---> Using cache\r\n ---> c6dd0853d8b0\r\nStep 11/11 : COPY . /code/\r\n ---> 1698e7492ca6\r\nSuccessfully built 1698e7492ca6\r\nSuccessfully tagged djangorestframework_web:latest\r\n```\r\n\r\nバージョンも表示される\r\n```\r\n➜ djangorestframework git:(master) ✗ sudo docker-compose run web npm info axios version \r\nStarting djangorestframework_db_1 ... done\r\n0.19.0\r\n```\r\n④jsファイルでimport、失敗\r\n\r\n### 補足情報(FW/ツールのバージョンなど)\r\n開発環境\r\nUbuntu18.04.2\r\ndocker-compose1.22.0\r\ndjango2.2.2\r\ndjangorestframework3.9.4\r\naixios0.19.0\r\n言語\r\npython,javascript,html,css","answerCount":2,"upvoteCount":0,"datePublished":"2019-07-09T07:04:58.212Z","dateModified":"2019-07-09T07:04:58.212Z","acceptedAnswer":{"@type":"Answer","text":"axiosをimportするのはnodeの環境でなければならなかったようです。\r\nreactのプロジェクトを立ち上げ、その中でaxiosをimportできます。","dateModified":"2019-07-14T08:58:16.503Z","datePublished":"2019-07-14T08:58:16.503Z","upvoteCount":0,"url":"https://teratail.com/questions/199512#reply-296708"},"suggestedAnswer":[{"@type":"Answer","text":"パッと見でアレ?と思っただけですけど\r\n`RUN npm install axios --save-dev`\r\n`RUN npm install axios --save`じゃないですか?","dateModified":"2019-07-10T01:01:33.412Z","datePublished":"2019-07-10T01:01:33.412Z","upvoteCount":0,"url":"https://teratail.com/questions/199512#reply-295569","comment":[{"@type":"Comment","text":"やってみましたが変わりませんでした。","datePublished":"2019-07-10T06:43:26.266Z","dateModified":"2019-07-10T06:43:26.266Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"axiosに関する質問","url":"https://teratail.com/tags/axios"},{"@type":"ListItem","position":3,"name":"axios","url":"https://teratail.com/tags/axios"}]}}}
質問するログイン新規登録
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

4090閲覧

javascriptのパッケージaxiosがimportできない

yk_00

総合スコア15

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/07/09 07:04

0

0

前提・実現したいこと

djanogrestframeworkのapi呼び出しをjavascriptのパッケージaxiosでできるらしいということがわかり実践したい。
しかし、axiosをimportできない。
どうしたらaxiosが使えるようになるでしょうか?

発生している問題・エラーメッセージ

chromeエラー
cssとjavascriptのファイル自体は読み込まれている。
chromeエラー
エラー文

Uncaught SyntaxError: Unexpected identifier

該当のソースコード

html

1{% load static %} 2<!DOCTYPE html> 3<html lang="jp" dir="ltr"> 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 <script type="text/javascript" src="{% static 'js/index.js' %}"></script> 8 <link href="{% static 'css/index.css' %}" rel="stylesheet"> 9 </head> 10 <body> 11 <p>test</p> 12 13 </body> 14</html>

css

1p { 2 color: red; 3}

js

1import axios from "axios"; 2 3console.log("import completed"); 4axios 5 .get("http://127.0.0.1:8000/api/v1/") 6 .then(response => { 7 console.log("status:", response.status); 8 console.log("axiosGetData:", response.data); 9 }) 10 .catch(err => { 11 console.log("axiosGetErr", err); 12 }); 13window.alert("test");

yml

1version: '3' 2 3services: 4 db: 5 image: postgres 6 web: 7 build: . 8 command: python manage.py runserver 0.0.0.0:8000 9 volumes: 10 - .:/code 11 ports: 12 - "8000:8000" 13 depends_on: 14 - db

Dockerfile

1FROM python:3 2ENV PYTHONUNBUFFERED 1 3RUN mkdir /code 4WORKDIR /code 5COPY requirements.txt /code/ 6RUN pip install -r requirements.txt 7RUN apt-get install -y gnupg 8RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - 9RUN apt-get install -y nodejs 10RUN npm install axios --save-dev 11COPY . /code/

txt

1Django>=2.0,<3.0 2psycopg2>=2.7,<3.0 3djangorestframework

試したこと

ここに問題に対して試したことを記載してください。
①docker-composeで環境を作る
②axiosを追加することに決める、dockerfileを書き直す。

FROM python:3 ENV PYTHONUNBUFFERED 1 RUN mkdir /code WORKDIR /code COPY requirements.txt /code/ RUN pip install -r requirements.txt RUN apt-get install -y gnupg//追加 RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -//追加 RUN apt-get install -y nodejs//追加 RUN npm install axios --save-dev//追加 COPY . /code/

③ビルドした
正常にビルド完了

➜ djangorestframework git:(master) ✗ sudo docker-compose build db uses an image, skipping Building web Step 1/11 : FROM python:3 ---> 34a518642c76 Step 2/11 : ENV PYTHONUNBUFFERED 1 ---> Using cache ---> ff4afb48bfa0 Step 3/11 : RUN mkdir /code ---> Using cache ---> ceec010feebe Step 4/11 : WORKDIR /code ---> Using cache ---> e707d1b2e60a Step 5/11 : COPY requirements.txt /code/ ---> Using cache ---> 1cc11eda6568 Step 6/11 : RUN pip install -r requirements.txt ---> Using cache ---> bffc88f8924e Step 7/11 : RUN apt-get install -y gnupg ---> Using cache ---> 6d54121ce170 Step 8/11 : RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - ---> Using cache ---> ee3599f7553c Step 9/11 : RUN apt-get install -y nodejs ---> Using cache ---> 40a7d3eee167 Step 10/11 : RUN npm install axios --save-dev ---> Using cache ---> c6dd0853d8b0 Step 11/11 : COPY . /code/ ---> 1698e7492ca6 Successfully built 1698e7492ca6 Successfully tagged djangorestframework_web:latest

バージョンも表示される

➜ djangorestframework git:(master) ✗ sudo docker-compose run web npm info axios version Starting djangorestframework_db_1 ... done 0.19.0

④jsファイルでimport、失敗

補足情報(FW/ツールのバージョンなど)

開発環境
Ubuntu18.04.2
docker-compose1.22.0
django2.2.2
djangorestframework3.9.4
aixios0.19.0
言語
python,javascript,html,css

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

axiosをimportするのはnodeの環境でなければならなかったようです。
reactのプロジェクトを立ち上げ、その中でaxiosをimportできます。

投稿2019/07/14 08:58

yk_00

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

パッと見でアレ?と思っただけですけど
RUN npm install axios --save-dev
RUN npm install axios --saveじゃないですか?

投稿2019/07/10 01:01

gentaro

総合スコア8947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_00

2019/07/10 06:43

やってみましたが変わりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問