I'm developing an application with this stack (main things): Django, Vuejs.
I write code both from my personal computer which runs Windows and my working one which has Ubuntu.
It used to be working similarly until I decided to upgrade some of the libraries of the frontend of my application from my working laptop (Ubuntu). Everything was working fine and since I run my application with docker-compose, I supposed it would work the same on my Windows computer (since the application is running with Docker..eh...).
I kept working from my pro laptop (Ubuntu) and one day I decided to code from my personal one. And at that moment I realized that the frontend was kinda broken...
The problems are :
Hot reload of my vuejs application no longer work when running under docker on Windows (Docker Desktop last version and WSL 2 latest stable release 1.0.0).
It takes ages for my application to start under development server (when running npm run serve).
Whereas on my Ubuntu laptop it's still smooth and hot reload works.
The thing is that, when upgrading the frontend, I scaffolded a new project with Vue CLI to have a clean structure and dependencies, just reinstalled what I needed and moved my code (it was working..). But now I have no idea what could be the root cause because, again, it's working with my Ubuntu machine !
For more information here is my package.json, maybe there is something in it that is well known to cause issues :
{
"name": "frontend",
"version": "0.4.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#mdi/font": "^5.8.55",
"#tiptap/extension-highlight": "^2.0.0-beta.199",
"#tiptap/extension-image": "^2.0.0-beta.199",
"#tiptap/starter-kit": "^2.0.0-beta.199",
"#tiptap/vue-2": "^2.0.0-beta.199",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"core-js": "^3.8.3",
"echarts": "^5.3.3",
"vue": "^2.7.10",
"vue-apexcharts": "^1.6.0",
"vue-axios": "^3.2.4",
"vue-echarts": "^6.2.3",
"vue-moment": "^4.1.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^3.5.1",
"vue-smooth-dnd": "^0.8.1",
"vuetify": "^2.6.10",
"vuetify-dialog": "^2.0.14",
"vuex": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.1.3",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"cypress": "^9.7.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"prettier": "^2.4.1",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
}
}
Also here is my Dockerfile :
FROM node:16.17
WORKDIR /frontend
COPY package*.json /frontend/
RUN npm install
COPY . .
CMD ["npm", "run", "serve"]
And the docker-compose part related to my frontend :
frontend:
container_name: app_dev_frontend
build:
context: ./frontend
dockerfile: Dockerfile.dev
environment:
- CHOKIDAR_USEPOLLING=true
volumes:
- ./frontend:/frontend
ports:
- 8081:8080
depends_on:
- db
- mailhog
- backend
If someone has hints for me to look at, or things I should check,... you are very welcome because I feel a bit lost on this issue. For me running things under Docker should not lead to such problems. If it works on my Ubuntu machine, running my docker-compose application should work on another machine, even if the host is running another operating system. It's the purpose of Docker right ?
Thanks in advance for your help.
Related
recently I need to do debug for a single file go binary application which is contained in the docker under k8s environment with its source code. When I package the docker I use the
/dlv --listen=:40000 --headless=true --api-version=2 exec /singleExeFile
and expose the 40000 port to the outer VM like
ports:
- 40000:40000
When I use my dev environment to connect to outer vm with dlv command. It seems that it can be connected. Like the following
foo#foo-vm:~$ dlv connect 110.123.123.123:40000
Type 'help' for list of commands.
(dlv)
But when use vscode to attach to the code, it meets two error(The vscode has installed go extension)
When use legacy connect, there is my launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Connect to server",
"type": "go",
"debugAdapter": "legacy",
"request": "attach",
"mode": "remote",
"port": 40000,
"host": "110.123.123.123",
"substitutePath": [
{
"from": "${workspaceFolder}/cmd/maine.go",
"to": "/singleExeFile"
}
]
}
]
}
But the vscode raises error and I haven't found similar error in google. Error: Socket connection to remote was closed
Use the dlv-dap method to connect
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Delve into Docker",
"type": "go",
"debugAdapter": "dlv-dap",
"request": "attach",
"mode": "remote",
"port": 40000,
"host": "110.123.123.123",
"substitutePath": [
{
"from": "${workspaceFolder}/cmd/maine.go",
"to": "/singleExeFile"
}
]
}
]
}
And when try to connect, there is no error raised by vscode. Just try to connect and stop by vscode. Even don't know what's the error.
With verbose param, there still isn't any output in the DEBUG console for dlv method. But for legacy method, the following error is outputted. Please check.
By the way, add verbose in legacy method and it raises some detailed message in DEBUG CONSOLE.
AttachRequest
Start remote debugging: connecting 110.123.123.123:40000
To client: {"seq":0,"type":"event","event":"initialized"}
InitializeEvent
To client: {"seq":0,"type":"response","request_seq":2,"command":"attach","success":true}
From client: configurationDone(undefined)
ConfigurationDoneRequest
Socket connection to remote was closed
To client: {"seq":16,"type":"response","request_seq":2,"command":"attach","success":false,"message":"Failed to continue: Check the debug console for details.","body":{"error":{"id":3000,"format":"Failed to continue: Check the debug console for details.","showUser":true}}}
Sending TerminatedEvent as delve is closed
To client: {"seq":0,"type":"event","event":"terminated"}
From client: disconnect({"restart":false})
DisconnectRequest
New Update in 9 July
I made another try to create a simple docker using the following dockerfile
FROM golang:1.16.15
RUN mkdir -p /var/lib/www && mkdir -p /var/lib/temp
WORKDIR /var/lib/temp
COPY . ./
RUN go env -w GOPROXY="https://goproxy.cn,direct"
RUN go install github.com/go-delve/delve/cmd/dlv#latest
RUN go mod tidy
RUN go build
RUN mv ./webproj /var/lib/www/ && rm -rf /var/lib/temp
WORKDIR /var/lib/www
COPY ./build.sh ./
EXPOSE 8080
EXPOSE 2345
RUN chmod 777 ./webproj
RUN chmod 777 ./build.sh
ENTRYPOINT ["/bin/bash","./build.sh"]
And the build.sh code is like
dlv --listen=:2345 --headless=true --api-version=2 --accept-multiclient exec ./webproj
After that, it works with GoLand debug. GoLand can debug when I send the GET api with designed. But it still can't be work with VSCode. When I use the vscode, it did connect to the docker. But when I add the break point. It shows that this is an unverified BreakPoint and can't stop.
Here is my launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Connect to server",
"type": "go",
"request": "attach",
"mode": "remote",
"remotePath": "${fileDirname}",
"port": 2345,
"host": "127.0.0.1"
}
]
}
So currently this is blocked. Help is very needed. Thanks.
I'm running VSCode 1.66.0 and I'm trying to attach the golang debugger on a running instance of a specific golang-docker-image. I'm able to do this when using 'dlv' but not when using 'dlv dap' and I can't understand why.
I'm following the instructions provided here:
https://vscode-debug-specs.github.io/go/#debugging-running-remote-process
Versions used:
VSCode ver. 1.66.0
dlv ver. 1.8.2
Docker Desktop ver. 4.4.4
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Remote Process",
"type": "go",
"request": "attach",
"mode": "remote",
"port": 2345,
"host": "127.0.0.1",
"showLog": true,
"apiVersion": 2,
"dlvLoadConfig": {
"followPointers": true,
"maxVariableRecurse": 1,
"maxStringLen": 200,
"maxArrayValues": 64,
"maxStructFields": -1
}
}
]
}
My dockerfile looks like so (as you can see the resulting image is based on the official image "mcr.microsoft.com/vscode/devcontainers/go:0-1.18"):
# syntax=docker/dockerfile:experimental
FROM golang:1.18 as builder
[...]
RUN CGO_ENABLED=0 GOOS=linux GOARCH=$ARCH go build -gcflags "all=-N -l" -v -o main .
FROM mcr.microsoft.com/vscode/devcontainers/go:0-1.18
WORKDIR /app
CMD ["./main"]
The command I use to launch the 'dlv' process inside the running docker instance is this:
dlv dap --listen=:2345 --log=true --api-version=2 attach 1 ./app/main
The VSCode UI allegedly allows me to attach via:
> Debug: Select and Start Debugging -> Attach to Remote Process
However the debugger doesn't really get activated in the sense that the breakpoints are not honored and the 'dlv' command shown above doesn't print anything in the output.
If I remove the 'dap' part from the 'dlv' command:
dlv --listen=:2345 --log=true --headless=true --log-output=debugger,debuglineerr,gdbwire,lldbout,rpc --api-version=2 --accept-multiclient --headless attach 1 ./app/main
then the debugger attaches perfectly and works just fine (this is the legacy mode of the dlv debugger if I understand correctly). What gives? Am I missing something?
As far as I search, there are several tips to place dynamic variables in nginx/conf.d/default.conf. Instead, I want to activate env variable in apiURLs.js file, which will be loaded in vue files.
# apiURLs.js
export const apiUrls = {
auth: "http://{{IP_ADDRESS}}:8826/auth/",
service1: "http://{{IP_ADDRESS}}:8826/",
service2: "http://{{IP_ADDRESS}}:8827/"
};
# in xxx.vue
let apiUrl = `${apiUrls.auth}login/`;
I tried envsubst in docker-compose.yml as
environment:
- IP_ADDRESS
command: /bin/sh -c "envsubst < /code/src/apiUrls.js | tee /code/src/apiUrls.js && nginx -g 'daemon off;'"
It appears to works as I go in docker container and confirmed that apiUrls.js is replaced.
However when I check the front app in browser and inspect api via chrome developer tool, it turned out that the api referred is still low url string with env argment, i.e. http://%24%7Bip_address%7D:8826/auth/login.
I suspect that vue project is pre-compiled during making docker image.
Is there some solution?
Or is it possible to purse env variable declared in nginx/conf.d/default.conf to apiURLs.js?
Your suspicion is correct. Any js file will almost certainly get processed into a new bundled file by webpack during the vue build, as opposed to being loaded at runtime.
If you can navigate in your docker to the vue project and re-run the build, your env variables should update.
Check package.json in the vue project for different build options. You should get something like:
{
"name": "vue-example",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
//...
and be able to rebuild it with npm run build
(Also in the name of stating the obvious, remember to disable cache pages in the chrome dev tools when checking the updated site)
I have looked at various solutions to no avail.
Testing webpack-dev-server on WSL 2 works fine; when I update the src/main.js file the browser updates however when inside of a docker container again running within WSL 2, the browser does not automatically update on saving changes, however the content does update when I manually refresh the browser?
Docker container ran via
sudo docker run -ti --name justatest -p 3009:8080 -v /home/dev/webpacktest:/home/test node:12 /bin/bash
webpack.dev.config
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: ["./src/main.js"],
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "./dist"),
},
devServer: {
contentBase: "./dist",
host: "0.0.0.0",
port: "8080",
},
};
package.json
{
"name": "webpacktest",
"version": "1.0.0",
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js --hot --port 8080 --host 0.0.0.0"
},
"license": "MIT",
"devDependencies": {
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
Also when I run a create-react-app inside a docker container inside of WSL 2 the browser refreshes on change. How does create-react-app do it
Rebooted computer and all was fine :/
I am trying to start my application using the http-server through npm start. It is working fine in the localhost but when i deploy the same application through docker container (port-mapped) , it doesn't appear in my local browser.
I have a directory inside my docker container(Ubuntu) which is runned through the command
docker run -it -p 8001:5500 ubuntu.
I have installed everything inside my container - npm, vim editor ,etc.
My package.json file is
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server -a localhost -p 5500"
},
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^5.0.2",
"http-server": "^0.12.1"
}
}
After that i have done npm install and then executed the command npm start.
The output of the command is :
But when i am trying to open my application in chrome browser it is throwing me an empty response.
Also when i am running the same application through my localhost it is accessible.
Why i am not able to access the server through the port mapping of docker container.??
localhost inside container won't be accessible from outside the container. Run your server on 0.0.0.0 inside the container.